/*! Theme Name: Beata Budrys Theme URI: https://beatabudrys.com/ Author: Modon Media Author URI: https://modonmedia.com/ Description: Custom WordPress theme for Beata Budrys — a restrained, type-driven author site. Built from the Underscores (_s) starter. Version: 0.1.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: bb-site Tags: blog, custom-menu, featured-images, translation-ready Beata Budrys theme is licensed under the GPL. Based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. */ /*-------------------------------------------------------------- # Site styles — Beata Budrys # Mirrors the standalone styles.css from the HTML template bundle. --------------------------------------------------------------*/ :root { --ink: #0F0F0F; --ink-soft: #2A2A2A; --muted: #6B6B6B; --muted-2: #9A9A9A; --paper: #FAFAF7; --paper-2: #F2F0E8; --gold: #B8924D; --red: #A6253A; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --content-width: 680px; --wide-width: 960px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.25; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } ::selection { background: var(--gold); color: var(--paper); } a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; transition: color 0.2s ease, border-color 0.2s ease; } a:hover { color: var(--red); border-color: var(--red); } .display, h1, h2, h3 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0; letter-spacing: -0.02em; line-height: 1.05; } .eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); } .eyebrow.gold { color: var(--gold); } .page { position: relative; z-index: 2; min-height: 100vh; } .container { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--space-3); } /* Nav */ nav.top { padding: var(--space-3); display: flex; justify-content: space-between; align-items: center; max-width: var(--wide-width); margin: 0 auto; font-size: 13px; letter-spacing: 0.05em; } nav.top .name { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: -0.01em; border: none; } nav.top .links { display: flex; gap: var(--space-3); } nav.top .links a { border: none; color: var(--muted); font-size: 13px; text-transform: lowercase; } nav.top .links a:hover, nav.top .links a.current { color: var(--ink); } /* Social CTA — used on every page */ .social-cta { margin: var(--space-4) auto; max-width: var(--content-width); padding: var(--space-3) var(--space-3); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); background: var(--paper-2); text-align: center; } .social-cta p { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 72, "SOFT" 60; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.4; color: var(--ink-soft); margin: 0; } .social-cta p em { font-style: italic; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; color: var(--gold); } .social-cta a { color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 1px; } .social-cta a:hover { color: var(--red); border-color: var(--red); } /* Footer */ footer { background: var(--ink); color: var(--muted-2); padding: var(--space-4) var(--space-3); font-size: 12px; } footer .footer-inner { max-width: var(--wide-width); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); } footer a { color: var(--muted-2); border-color: var(--muted); } footer a:hover { color: var(--paper); border-color: var(--paper); } @media (max-width: 768px) { nav.top .links { gap: var(--space-2); font-size: 12px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Drop me a line — appears on every page */ .drop-line { background: var(--paper-2); margin: var(--space-6) 0 0; padding: var(--space-5) var(--space-3); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); } .drop-line-inner { max-width: var(--content-width); margin: 0 auto; text-align: center; } .drop-line .eyebrow { margin-bottom: var(--space-2); color: var(--gold); } .drop-line h2 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 40; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; letter-spacing: -0.018em; margin-bottom: var(--space-3); } .drop-line h2 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .drop-line p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; margin: 0 auto var(--space-4); } .drop-line .follow-btn { display: inline-block; background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-4); font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.05em; border: 1px solid var(--ink); text-decoration: none; transition: all 0.2s ease; } .drop-line .follow-btn:hover { background: var(--paper); color: var(--ink); } /*-------------------------------------------------------------- # Homepage (front-page.php) --------------------------------------------------------------*/ .hero { padding: var(--space-6) var(--space-3) var(--space-4); max-width: var(--wide-width); margin: 0 auto; } .hero .eyebrow { margin-bottom: var(--space-3); } .hero h1 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 30,"WONK" 0; font-size: clamp(2.25rem, 5.5vw, 4.5rem); line-height: 1.0; letter-spacing: -0.022em; margin-bottom: var(--space-4); max-width: 22ch; } .hero h1 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .hero p { font-weight: 300; font-size: clamp(1.02rem, 1.5vw, 1.15rem); line-height: 1.65; color: var(--ink-soft); max-width: 60ch; margin-bottom: var(--space-3); } .hero p:last-of-type { margin-bottom: 0; } .goal-block { background: var(--paper-2); margin: var(--space-4) auto var(--space-5); max-width: var(--wide-width); padding: var(--space-4) var(--space-3); border-top: 1px solid var(--gold); } .goal-block-inner { max-width: var(--content-width); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .goal-block .label { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 8px; } .goal-block .goal-text { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 72,"SOFT" 50; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); } .goal-block .right-now-text { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 72,"SOFT" 70; font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.45; color: var(--ink-soft); } .goal-block .right-now-text em { font-style: italic; font-variation-settings: "opsz" 72,"SOFT" 100,"WONK" 1; color: var(--red); } .goal-block .meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; margin-top: 6px; } .goal-block .divider { height: 1px; background: var(--ink); opacity: 0.15; } /* Weekly question — homepage section that replaced the interactive poll. Reuses .poll-section + .question-card from the legacy poll widget for visual consistency. Only the small "Vote on Instagram" link below the context paragraph is new. */ .weekly-question .question-card .q-link { margin: var(--space-3) 0 0; padding: 0; border: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; } .weekly-question .question-card .q-link a { color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 1px; } .weekly-question .question-card .q-link a:hover { color: var(--red); border-color: var(--red); } .poll-section { background: var(--paper); margin: 0; padding: var(--space-5) var(--space-3); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); } .poll-inner { max-width: var(--content-width); margin: 0 auto; } .poll-section .eyebrow { margin-bottom: var(--space-2); color: var(--gold); } .poll-section h2 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 40; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.018em; margin-bottom: var(--space-3); } .poll-section h2 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .poll-section p { max-width: 60ch; margin-bottom: var(--space-3); } .question-card { margin-top: var(--space-4); background: var(--paper-2); border: 1px solid var(--ink); padding: var(--space-4) var(--space-3); } .q-eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; margin-bottom: var(--space-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1); } .q-eyebrow .live-marker { color: var(--red); display: inline-flex; align-items: center; gap: 6px; } .q-eyebrow .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); display: inline-block; animation: pulse 2.5s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .q-text { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 72,"SOFT" 60; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.3; letter-spacing: -0.012em; margin-bottom: var(--space-2); } .q-text em { font-style: italic; font-variation-settings: "opsz" 72,"SOFT" 100,"WONK" 1; color: var(--gold); } .q-context { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: var(--space-3); max-width: 56ch; } .vote-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); } .vote-btn { background: var(--paper); border: 1px solid var(--ink); padding: var(--space-2) var(--space-3); font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; text-align: left; transition: background 0.2s ease, color 0.2s ease; display: flex; flex-direction: column; gap: 6px; line-height: 1.3; } .vote-btn:hover { background: var(--ink); color: var(--paper); } .vote-btn .label { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; font-variation-settings: "opsz" 72,"SOFT" 50; } .vote-btn .pct { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 0.05em; } .vote-btn:hover .pct { color: var(--paper-2); } .vote-result { display: none; margin-top: var(--space-2); } .vote-result.shown { display: block; } .vote-result .your-vote { font-size: 13px; color: var(--muted); margin-bottom: var(--space-2); } .vote-result .your-vote strong { color: var(--red); font-weight: 500; font-style: italic; } .bar-track { background: var(--paper); height: 32px; border: 1px solid var(--ink); display: flex; overflow: hidden; } .bar-yes { background: var(--ink); color: var(--paper); height: 100%; display: flex; align-items: center; padding: 0 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; transition: width 0.5s ease; white-space: nowrap; } .bar-no { background: var(--paper); color: var(--ink); height: 100%; display: flex; align-items: center; padding: 0 12px; flex: 1; font-family: var(--font-mono); font-size: 12px; font-weight: 500; justify-content: flex-end; white-space: nowrap; } .vote-result .total { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: var(--space-2); letter-spacing: 0.05em; } .poll-archive-link { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--muted); font-size: 14px; color: var(--muted); text-align: center; } .poll-archive-link a { color: var(--gold); border-bottom: 0.5px solid var(--gold); } .poll-archive-link a:hover { color: var(--red); border-color: var(--red); } .poll-archive-link p { margin: 0; } .poll-archive-link p + p { margin-top: var(--space-2); } .poll-archive-link .small-link { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; } .poll-archive-link .small-link a { color: var(--muted); border-bottom: 0.5px solid var(--muted); } section.prose { padding: var(--space-5) 0; } section.prose h2 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 40; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.018em; margin-bottom: var(--space-3); max-width: 22ch; } section.prose h2 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } section.prose p { margin-bottom: var(--space-3); max-width: 62ch; } section.prose p:last-child { margin-bottom: 0; } .stat-row { margin: var(--space-3) 0; padding: var(--space-4) 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-3); align-items: start; } .stat-row:last-of-type { border-bottom: 1px solid var(--ink); } .stat-name { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin-bottom: var(--space-1); } .stat-source { font-size: 12px; color: var(--muted); line-height: 1.5; } .stat-source a { color: var(--muted); border-bottom: 0.5px solid var(--muted); font-size: 12px; } .stat-cell { display: flex; flex-direction: column; gap: 6px; } .stat-cell .head { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); } .stat-cell .value { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3.5vw, 2.5rem); line-height: 1; letter-spacing: -0.025em; } .stat-cell .value .small { font-size: 0.5em; color: var(--muted); margin-left: 0.1em; } .stat-cell.mine .value { color: var(--red); font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; } .stat-cell.mine .value.pending { font-style: normal; font-variation-settings: "opsz" 72,"SOFT" 30; font-size: 0.95rem; color: var(--muted); line-height: 1.4; } .stat-cell .versions { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; } .stat-cell .versions .v.current { color: var(--red); } .log-link-cta { margin-top: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--muted); font-size: 14px; color: var(--muted); max-width: 62ch; } .log-link-cta a { color: var(--gold); border-bottom: 0.5px solid var(--gold); } .about { padding: var(--space-5) 0; } .about-inner { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--space-3); } .about .eyebrow { margin-bottom: var(--space-2); } .about h2 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 40; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.018em; margin-bottom: var(--space-4); max-width: 22ch; } .about h2 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .about-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-4); align-items: start; } .portrait-placeholder { aspect-ratio: 4/5; background: var(--paper-2); background-image: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 12px, rgba(15,15,15,0.04) 12px, rgba(15,15,15,0.04) 24px); display: flex; align-items: center; justify-content: center; } .portrait-placeholder::after { content: "portrait"; font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; background: var(--paper); padding: 4px 8px; } .about-portrait { aspect-ratio: 4/5; overflow: hidden; } .about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-text { font-size: 17px; line-height: 1.65; color: var(--ink-soft); } .about-text p { margin-bottom: var(--space-3); } .about-text p:last-child { margin-bottom: 0; } .about-text p:first-child { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 72,"SOFT" 60; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; max-width: 36ch; } .about-text em { font-style: italic; font-variation-settings: "opsz" 72,"SOFT" 100,"WONK" 1; color: var(--red); } .about-text .more-link { margin-top: var(--space-3); } .about-text .more-link a { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 72,"SOFT" 50; font-size: 1.05rem; font-style: italic; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 2px; } .about-text .more-link a:hover { color: var(--red); border-color: var(--red); } .capture { background: var(--ink); color: var(--paper); padding: var(--space-6) var(--space-3); margin-top: var(--space-6); border-top: 1px solid var(--gold); } .capture-inner { max-width: var(--content-width); margin: 0 auto; } .capture .eyebrow { color: var(--muted-2); margin-bottom: var(--space-2); } .capture h2 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 40; font-size: clamp(1.8rem, 3.5vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--space-3); } .capture h2 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--red); } .capture p { color: var(--muted-2); margin-bottom: var(--space-4); max-width: 52ch; } .capture-form { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--paper); padding-bottom: var(--space-1); max-width: 480px; } .capture-form input[type="email"] { flex: 1; background: transparent; border: none; color: var(--paper); font-family: var(--font-body); font-size: 1.05rem; padding: var(--space-2) 0; outline: none; } .capture-form input[type="email"]::placeholder { color: var(--muted-2); font-style: italic; } .capture-form button { background: transparent; border: none; color: var(--paper); font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; padding: var(--space-2); } .capture-form button:hover { color: var(--gold); } .capture-note { margin-top: var(--space-3); font-size: 12px; color: var(--muted-2); font-style: italic; } @media (max-width: 768px) { .hero { padding-top: var(--space-5); } .stat-row { grid-template-columns: 1fr; gap: var(--space-2); } .about-grid { grid-template-columns: 1fr; gap: var(--space-3); } .portrait-placeholder { max-width: 280px; } .vote-buttons { grid-template-columns: 1fr; } .capture-form { flex-direction: column; gap: var(--space-2); align-items: stretch; } .capture-form button { text-align: left; padding-left: 0; } } /*-------------------------------------------------------------- # About page (page-about.php) --------------------------------------------------------------*/ .about-page-header { padding: var(--space-6) var(--space-3) var(--space-4); max-width: var(--wide-width); margin: 0 auto; } .about-page-header .eyebrow { margin-bottom: var(--space-2); color: var(--gold); } .about-page-header h1 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 30,"WONK" 0; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.0; letter-spacing: -0.025em; margin-bottom: var(--space-2); max-width: 22ch; } .about-page-header h1 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .about-hero { max-width: var(--wide-width); margin: 0 auto var(--space-6); padding: 0 var(--space-3); display: grid; grid-template-columns: 360px 1fr; gap: var(--space-5); align-items: start; } .about-hero .portrait-placeholder { aspect-ratio: 4/5; background: var(--paper-2); background-image: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 12px, rgba(15,15,15,0.04) 12px, rgba(15,15,15,0.04) 24px); display: flex; align-items: center; justify-content: center; } .about-hero .portrait-placeholder::after { content: "portrait \00b7 white blouse"; font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; background: var(--paper); padding: 4px 8px; } .about-hero .bio-text { padding-top: var(--space-2); } .about-hero .bio-text p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin-bottom: var(--space-3); max-width: 50ch; } .about-hero .bio-text p:first-child { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 72,"SOFT" 60; font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; max-width: 32ch; } .about-hero .bio-text em { font-style: italic; font-variation-settings: "opsz" 72,"SOFT" 100,"WONK" 1; color: var(--red); } .find-me { max-width: var(--content-width); margin: var(--space-6) auto; padding: var(--space-4) var(--space-3); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .find-me .eyebrow { margin-bottom: var(--space-3); } .find-me .line { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 72,"SOFT" 50; font-size: 1.4rem; line-height: 1.4; margin-bottom: var(--space-2); } .find-me .line .channel { color: var(--muted); font-size: 0.8em; letter-spacing: 0.02em; margin-right: 12px; font-weight: 300; } .find-me .line a { color: var(--ink); border-bottom: 1px solid var(--gold); } .find-me .line a:hover { color: var(--red); border-color: var(--red); } .find-me .note { font-size: 14px; color: var(--muted); font-style: italic; margin-top: var(--space-3); max-width: 56ch; line-height: 1.55; } .env-photo { max-width: var(--content-width); margin: var(--space-6) auto; padding: 0 var(--space-3); } .env-photo .photo-placeholder { aspect-ratio: 16/10; background: var(--paper-2); background-image: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 12px, rgba(15,15,15,0.04) 12px, rgba(15,15,15,0.04) 24px); display: flex; align-items: center; justify-content: center; } .env-photo .photo-placeholder::after { content: "environmental \00b7 yellow skirt + kinder bueno"; font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; background: var(--paper); padding: 4px 8px; } .reading { max-width: var(--content-width); margin: var(--space-6) auto; padding: 0 var(--space-3); } .reading h2 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144,"SOFT" 50; font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: var(--space-3); margin-top: var(--space-5); color: var(--ink); max-width: 30ch; } .reading h2:first-child { margin-top: 0; } .reading h2 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .reading p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin-bottom: var(--space-3); max-width: 62ch; } .reading .book-list { list-style: none; margin: var(--space-3) 0; padding: 0; } .reading .book-list li { font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin-bottom: var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--gold); max-width: 60ch; } .reading .book-list li em { font-style: italic; font-variation-settings: "opsz" 72,"SOFT" 80; } .reading p em { font-style: italic; font-variation-settings: "opsz" 72,"SOFT" 80; } @media (max-width: 768px) { .about-hero { grid-template-columns: 1fr; gap: var(--space-3); } .about-hero .portrait-placeholder { max-width: 320px; } .find-me .line .channel { display: block; margin-bottom: 4px; } } /*-------------------------------------------------------------- # Poll page (page-poll.php) --------------------------------------------------------------*/ .poll-page-header { padding: var(--space-6) var(--space-3) var(--space-4); max-width: var(--content-width); margin: 0 auto; } .poll-page-header .eyebrow { margin-bottom: var(--space-2); color: var(--gold); } .poll-page-header h1 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 30,"WONK" 0; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.0; letter-spacing: -0.025em; margin-bottom: var(--space-2); max-width: 26ch; } .poll-page-header h1 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .poll-page-header h2 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 72,"SOFT" 60; font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; color: var(--ink-soft); margin-bottom: var(--space-3); max-width: 50ch; } .poll-page-header h2 em { font-variation-settings: "opsz" 72,"SOFT" 100,"WONK" 1; color: var(--gold); } .poll-page-header .lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 56ch; margin-bottom: var(--space-3); } .poll-stats { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--ink); display: flex; gap: var(--space-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .poll-stats .num { color: var(--ink); font-weight: 500; } .poll-section-label { max-width: var(--content-width); margin: var(--space-5) auto var(--space-3); padding: 0 var(--space-3); } .poll-section-label .eyebrow { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 8px; } .poll-list { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--space-3) var(--space-5); } .poll-card { padding: var(--space-4) 0; border-bottom: 1px solid var(--ink); scroll-margin-top: var(--space-4); } .poll-card:last-child { border-bottom: none; } .poll-card .pc-meta { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: 12px; color: var(--muted); flex-wrap: wrap; } .poll-card .pc-meta .open { color: var(--red); } .poll-card .pc-meta .resolved { color: var(--gold); } .poll-card h3 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 40; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--space-2); max-width: 30ch; } .poll-card h3 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .poll-card .pc-context { font-size: 15px; color: var(--ink-soft); line-height: 1.5; margin-bottom: var(--space-2); max-width: 60ch; } .poll-empty { padding: var(--space-5) 0; text-align: center; font-size: 15px; color: var(--muted); font-style: italic; line-height: 1.6; max-width: 50ch; margin: 0 auto; } .poll-vote-section { background: var(--paper-2); margin: var(--space-4) auto var(--space-5); max-width: var(--content-width); padding: var(--space-4) var(--space-3); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); } .poll-vote-section .question-card { margin: 0; background: var(--paper); border: 1px solid var(--ink); padding: var(--space-4) var(--space-3); } /*-------------------------------------------------------------- # Log index (page-log.php) + category archive (taxonomy-log_cat.php) --------------------------------------------------------------*/ .log-header { padding: var(--space-6) var(--space-3) var(--space-4); max-width: var(--content-width); margin: 0 auto; } .log-header .eyebrow { margin-bottom: var(--space-2); } .log-header .eyebrow a { color: var(--muted); border: none; } .log-header h1 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 30,"WONK" 0; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.0; letter-spacing: -0.025em; margin-bottom: var(--space-2); max-width: 24ch; } .log-header h2 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 72,"SOFT" 60; font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; color: var(--ink-soft); margin-bottom: var(--space-3); max-width: 50ch; } .log-header h2 em { font-variation-settings: "opsz" 72,"SOFT" 100,"WONK" 1; color: var(--gold); } .log-header .lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 56ch; margin-bottom: var(--space-3); } .log-stats { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--ink); display: flex; gap: var(--space-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.03em; } .log-stats .stat { display: flex; align-items: baseline; gap: 6px; } .log-stats .stat .num { color: var(--ink); font-weight: 500; } .entries { max-width: var(--content-width); margin: 0 auto; padding: var(--space-4) var(--space-3) var(--space-4); } .entry { padding: var(--space-4) 0; border-bottom: 1px solid var(--ink); } .entry:last-child { border-bottom: none; } .entry-meta { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: 12px; color: var(--muted); flex-wrap: wrap; } .entry-meta .date { color: var(--ink); font-weight: 500; } .entry-meta .cat-link { border: none; color: var(--gold); font-size: 12px; } .entry h3 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 40; font-size: clamp(1.4rem, 2.5vw, 1.8rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: var(--space-2); max-width: 28ch; } .entry h3 a { border: none; color: var(--ink); } .entry h3 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .entry .preview { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin-bottom: var(--space-2); max-width: 60ch; } .entry .read-link { font-family: var(--font-mono); font-size: 12px; color: var(--muted); border-bottom: 0.5px solid var(--muted); } .future-section { max-width: var(--content-width); margin: 0 auto; padding: var(--space-4) var(--space-3) var(--space-6); border-top: 1px solid var(--muted); } .future-section .eyebrow { color: var(--muted); margin-bottom: var(--space-2); } .future-section .future-intro { font-size: 15px; color: var(--muted); line-height: 1.55; margin-bottom: var(--space-3); max-width: 56ch; font-style: italic; } .future-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); } .future-item { padding: var(--space-2) var(--space-3); border: 0.5px solid var(--muted); font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.02em; display: block; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; } .future-item .slug { display: block; color: var(--ink-soft); font-weight: 500; margin-bottom: 4px; font-family: var(--font-display); font-size: 15px; letter-spacing: -0.005em; } .future-item .status { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; } .future-item--live { border-color: var(--gold); } .future-item--live .status { color: var(--gold); } a.future-item--live:hover { border-color: var(--red); color: var(--red); } a.future-item--live:hover .slug { color: var(--red); } a.future-item--live:hover .status { color: var(--red); } .future-item--reserved { cursor: default; opacity: 0.7; } /*-------------------------------------------------------------- # Single log entry (single-log_entry.php) --------------------------------------------------------------*/ .breadcrumb { max-width: var(--content-width); margin: 0 auto; padding: var(--space-4) var(--space-3) 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .breadcrumb a { color: var(--muted); border-bottom: 0.5px solid var(--muted); } .breadcrumb .sep { margin: 0 8px; opacity: 0.5; } .entry-header { max-width: var(--content-width); margin: 0 auto; padding: var(--space-3) var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink); } .entry-header h1 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 30,"WONK" 0; font-size: clamp(1.9rem, 4.2vw, 2.6rem); line-height: 1.08; letter-spacing: -0.022em; margin-bottom: var(--space-2); max-width: 28ch; } .entry-header h1 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .entry-header .lead { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 72,"SOFT" 80; font-style: italic; font-size: clamp(1.15rem, 1.9vw, 1.35rem); line-height: 1.4; color: var(--ink-soft); margin-top: var(--space-3); max-width: 52ch; } .entry-body { max-width: var(--content-width); margin: 0 auto; padding: var(--space-5) var(--space-3) var(--space-5); } .entry-body p { margin-bottom: var(--space-3); max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--ink-soft); } .entry-body > p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 300; float: left; font-size: 4.5rem; line-height: 0.85; margin: 0.1em 0.1em 0 -0.05em; color: var(--gold); } .entry-body em { font-style: italic; font-variation-settings: "opsz" 72,"SOFT" 100,"WONK" 1; color: var(--red); } .entry-body h2 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144,"SOFT" 50; font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; margin-top: var(--space-5); margin-bottom: var(--space-3); color: var(--ink); max-width: 30ch; } .entry-body h2 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .entry-footer { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--ink); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .entry-footer a { color: var(--muted); border-bottom: 0.5px solid var(--muted); } .handles-placeholder { margin: var(--space-3) 0; padding: var(--space-3); background: var(--paper-2); border-left: 2px dashed var(--muted); font-family: var(--font-mono); font-size: 13px; color: var(--muted); line-height: 1.6; font-style: italic; max-width: 56ch; } .cat-outro { max-width: var(--content-width); margin: var(--space-5) auto var(--space-6); padding: var(--space-3); border-top: 1px solid var(--gold); } .cat-outro-inner p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 60ch; } .pull-quote { margin: var(--space-5) auto; max-width: 52ch; padding: var(--space-3) 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); text-align: center; } .pull-quote blockquote { margin: 0; padding: 0; font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); } .pull-quote blockquote p { margin: 0; max-width: none; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } .pull-quote blockquote p + p { margin-top: var(--space-2); } .pull-quote figcaption { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; } .related-entries { max-width: var(--content-width); margin: var(--space-5) auto var(--space-6); padding: var(--space-3) var(--space-3); border-top: 1px solid var(--ink); } .related-entries .eyebrow { margin-bottom: var(--space-3); color: var(--gold); } .related-entries ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); } .related-entries li a { display: block; padding: var(--space-2) 0; border: none; border-bottom: 1px solid var(--paper-2); color: var(--ink); transition: border-color 0.2s ease, color 0.2s ease; } .related-entries li:last-child a { border-bottom: none; } .related-entries .related-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; display: block; margin-bottom: 4px; } .related-entries .related-title { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; line-height: 1.3; display: block; } .related-entries li a:hover { border-color: var(--red); color: var(--red); } .related-entries li a:hover .related-meta { color: var(--red); } @media (max-width: 768px) { .related-entries ul { grid-template-columns: 1fr; } } /*-------------------------------------------------------------- # Book pages (page-book.php) — /book and /book/agents --------------------------------------------------------------*/ .book-page-header { padding: var(--space-6) var(--space-3) var(--space-4); max-width: var(--wide-width); margin: 0 auto; } .book-page-header .eyebrow { margin-bottom: var(--space-2); color: var(--gold); } .book-page-header h1 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 30,"WONK" 0; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.0; letter-spacing: -0.025em; margin-bottom: var(--space-2); max-width: 22ch; } .book-page-header h1 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--red); } .book-blurb { max-width: var(--wide-width); margin: 0 auto; padding: var(--space-4) var(--space-3) 0; } .book-blurb .blurb-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-5); align-items: start; } .book-blurb .blurb-cover img { width: 100%; height: auto; display: block; border: 1px solid var(--ink); box-shadow: 0 14px 36px rgba(15,15,15,0.12); } .book-blurb .cover-placeholder { aspect-ratio: 2/3; background: var(--paper-2); background-image: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 12px, rgba(15,15,15,0.04) 12px, rgba(15,15,15,0.04) 24px); border: 1px solid var(--ink); box-shadow: 0 14px 36px rgba(15,15,15,0.12); display: flex; align-items: center; justify-content: center; position: relative; } .book-blurb .cover-placeholder::after { content: "cover · coming soon"; font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; background: var(--paper); padding: 4px 8px; } .book-blurb .book-title { font-family: var(--font-display); font-weight: 350; font-variation-settings: "opsz" 144,"SOFT" 30,"WONK" 0; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); display: inline; } .book-blurb .working-tag { display: inline-block; vertical-align: middle; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--red); border: 1px solid var(--red); padding: 5px 12px; margin-left: var(--space-2); transform: translateY(-4px); } .book-blurb .genre-line { font-family: var(--font-body); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin: var(--space-2) 0 var(--space-1); } .book-blurb .meta-line { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--ink); } .book-blurb .meta-line em { font-style: normal; color: var(--red); } .book-blurb .book-body p { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); margin-bottom: var(--space-3); max-width: 62ch; } .book-blurb .book-body p em { font-style: italic; font-variation-settings: "opsz" 72,"SOFT" 100,"WONK" 1; color: var(--red); } /* Email signup patch — public /book page */ .email-patch { border-left: 2px solid var(--gold); background: var(--paper-2); padding: var(--space-3) var(--space-3); max-width: 62ch; margin-top: var(--space-2); } .email-patch .eyebrow { color: var(--gold); margin-bottom: var(--space-2); } .patch-form { display: flex; gap: var(--space-2); align-items: stretch; } .patch-form input[type="email"] { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid var(--ink); color: var(--ink); font-family: var(--font-body); font-size: 0.95rem; padding: 6px 0; outline: none; } .patch-form input[type="email"]::placeholder { color: var(--muted); font-style: italic; } .patch-form button { background: var(--ink); border: 1px solid var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; padding: 6px var(--space-3); transition: all 0.2s ease; white-space: nowrap; } .patch-form button:hover { background: var(--red); border-color: var(--red); } .patch-note { margin-top: var(--space-2); font-size: 11px; color: var(--muted); font-style: italic; } /* Agent downloads — /book/agents page */ .agent-downloads { border-left: 2px solid var(--gold); background: var(--paper-2); padding: var(--space-3); max-width: 62ch; margin-top: var(--space-2); } .agent-downloads .eyebrow { color: var(--gold); margin-bottom: var(--space-2); } .agent-downloads .dl-intro { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 var(--space-3); } .agent-downloads .dl-buttons { display: flex; flex-direction: column; gap: var(--space-2); } .agent-downloads .dl-button { display: inline-flex; align-items: center; justify-content: space-between; background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-3); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--ink); text-decoration: none; transition: all 0.2s ease; } .agent-downloads .dl-button:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); } .agent-downloads .dl-button-disabled { background: transparent; color: var(--muted); border-color: var(--muted); cursor: not-allowed; text-transform: none; letter-spacing: 0.05em; font-size: 12px; } .agent-downloads .dl-button-disabled:hover { background: transparent; color: var(--muted); border-color: var(--muted); } /* Password gate on /book/agents/ — clean form matching site typography */ .book-password-gate { max-width: 480px; margin: 0 auto var(--space-6); padding: var(--space-4); border-left: 2px solid var(--gold); background: var(--paper-2); } .book-password-gate .gate-lead { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 var(--space-3); } .book-password-gate .post-password-form { margin: 0; } .book-password-gate .post-password-form p { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 var(--space-2); } .book-password-gate .post-password-form label { font-size: 11px; color: var(--muted); } .book-password-gate .post-password-form input[type="password"] { display: block; width: 100%; box-sizing: border-box; background: transparent; border: none; border-bottom: 1px solid var(--ink); color: var(--ink); font-family: var(--font-body); font-size: 1rem; padding: var(--space-2) 0; margin: var(--space-1) 0 var(--space-3); outline: none; } .book-password-gate .post-password-form input[type="submit"] { background: var(--ink); border: 1px solid var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; padding: 10px var(--space-3); transition: all 0.2s ease; } .book-password-gate .post-password-form input[type="submit"]:hover { background: var(--red); border-color: var(--red); } @media (max-width: 768px) { .book-blurb .blurb-grid { grid-template-columns: 1fr; gap: var(--space-4); } .book-blurb .blurb-cover { order: -1; max-width: 280px; margin: 0 auto; } .book-blurb .working-tag { display: block; width: max-content; margin: var(--space-2) 0 0; transform: none; } .patch-form { flex-direction: column; gap: var(--space-2); align-items: stretch; } } /*-------------------------------------------------------------- # Cookie consent banner (rendered by bb_render_cookie_banner) --------------------------------------------------------------*/ .bb-cookie-banner { position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 9999; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 14px 36px rgba(15,15,15,0.18); padding: var(--space-3); max-width: 760px; margin: 0 auto; opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .bb-cookie-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .bb-cookie-banner[hidden] { display: none; } .bb-cookie-inner { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; } .bb-cookie-msg { flex: 1 1 320px; margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--ink-soft); max-width: 56ch; } .bb-cookie-msg a { color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 1px; } .bb-cookie-msg a:hover { color: var(--red); border-color: var(--red); } .bb-cookie-actions { display: flex; gap: var(--space-2); align-items: stretch; flex-wrap: wrap; } .bb-cookie-btn { font-family: var(--font-body); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; padding: 10px var(--space-3); border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: all 0.2s ease; } .bb-cookie-btn:hover { background: var(--ink); color: var(--paper); } .bb-cookie-btn.bb-cookie-accept { background: var(--ink); color: var(--paper); } .bb-cookie-btn.bb-cookie-accept:hover { background: var(--red); border-color: var(--red); } .bb-cookie-btn.bb-cookie-reject { background: transparent; color: var(--muted); border-color: var(--muted); } .bb-cookie-btn.bb-cookie-reject:hover { color: var(--ink); border-color: var(--ink); background: transparent; } @media (max-width: 600px) { .bb-cookie-banner { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); padding: var(--space-2); } .bb-cookie-actions { width: 100%; } .bb-cookie-btn { flex: 1 1 0; } } /*-------------------------------------------------------------- # Legal pages (Privacy + Terms — page-legal.php) --------------------------------------------------------------*/ .legal-page-header { padding: var(--space-6) var(--space-3) var(--space-3); max-width: var(--content-width); margin: 0 auto; } .legal-page-header .eyebrow { margin-bottom: var(--space-2); color: var(--gold); } .legal-page-header h1 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 30,"WONK" 0; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: var(--space-2); max-width: 22ch; } .legal-page-header .legal-meta { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; } .legal-body.entry-body { padding-top: var(--space-3); } .legal-body p.legal-lead { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 72,"SOFT" 60; font-size: clamp(1.15rem, 1.9vw, 1.35rem); line-height: 1.45; color: var(--ink-soft); max-width: 56ch; margin-bottom: var(--space-4); } .legal-body > p:first-of-type::first-letter { font: inherit; float: none; margin: 0; color: inherit; font-size: inherit; } .legal-body h2 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144,"SOFT" 40; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.3; letter-spacing: -0.005em; margin-top: var(--space-5); margin-bottom: var(--space-2); color: var(--ink); max-width: none; } .legal-body h2 + p { margin-top: 0; } .legal-body p, .legal-body li { font-size: 16px; line-height: 1.65; color: var(--ink-soft); } .legal-body p strong, .legal-body li strong { color: var(--ink); font-weight: 500; } .legal-meta-block { background: var(--paper-2); border-left: 2px solid var(--gold); padding: var(--space-3); margin: var(--space-3) 0 var(--space-4); max-width: 56ch; } .legal-meta-block p { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin: 0; padding: 4px 0; letter-spacing: 0.02em; line-height: 1.5; max-width: none; } .legal-meta-block .m-label { display: inline-block; min-width: 13ch; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; font-weight: 500; } .legal-meta-block a { color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 1px; } .legal-body blockquote.legal-callout { background: var(--paper-2); border-left: 2px solid var(--gold); padding: var(--space-3); margin: var(--space-4) 0; max-width: 62ch; } .legal-body blockquote.legal-callout p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--space-2); max-width: none; } .legal-body blockquote.legal-callout p:last-child { margin-bottom: 0; } .legal-body blockquote.legal-callout strong { color: var(--ink); font-weight: 600; text-transform: uppercase; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; } .legal-body blockquote.legal-callout em { color: var(--muted); font-style: italic; } .footer-legal { max-width: var(--wide-width); margin: var(--space-3) auto 0; padding: var(--space-2) var(--space-3) 0; font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; text-align: right; border-top: 1px solid rgba(154, 154, 154, 0.25); } .footer-legal a { color: var(--muted-2); border-color: var(--muted); } .footer-legal a:hover { color: var(--paper); border-color: var(--paper); } /*-------------------------------------------------------------- # 404 page (404.php) --------------------------------------------------------------*/ .error-page-header { padding: var(--space-6) var(--space-3) var(--space-4); max-width: var(--content-width); margin: 0 auto; } .error-page-header .eyebrow { margin-bottom: var(--space-2); color: var(--gold); } .error-page-header h1 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144,"SOFT" 30,"WONK" 0; font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1; letter-spacing: -0.025em; margin-bottom: var(--space-3); max-width: 16ch; } .error-page-header h1 em { font-style: italic; font-variation-settings: "opsz" 144,"SOFT" 100,"WONK" 1; color: var(--gold); } .error-page-header .lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 56ch; } .error-links { max-width: var(--content-width); margin: var(--space-4) auto var(--space-6); padding: 0 var(--space-3); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .error-links a { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--ink); text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .error-links a:hover { background: var(--ink); border-color: var(--ink); } .error-link-eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--gold); letter-spacing: 0.15em; text-transform: uppercase; } .error-links a:hover .error-link-eyebrow { color: var(--gold); } .error-link-label { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink); letter-spacing: -0.01em; } .error-links a:hover .error-link-label { color: var(--paper); } @media (max-width: 768px) { .error-links { grid-template-columns: 1fr; } } /*-------------------------------------------------------------- # Editor-driven prose lists # The universal reset at the top of this file strips margin/padding from # every element including