/* Network stylesheet — "modern literary magazine" direction. Warm/analog via paper tones, serif display type and hairline rules; modern via fluid type scale, generous whitespace and editorial layout. Each site injects its palette as CSS vars in . */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } :root { --rule: color-mix(in srgb, var(--ink) 14%, transparent); --muted: color-mix(in srgb, var(--ink) 62%, var(--bg)); --serif-display: "Fraunces", ui-serif, "Iowan Old Style", Georgia, serif; --serif-text: "Source Serif 4", ui-serif, "Iowan Old Style", Palatino, Georgia, serif; --measure: 66ch; } body { margin: 0; background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 70%), var(--bg, #faf6ef); color: var(--ink, #2b2722); font-family: var(--serif-text); font-size: clamp(1.0rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.7; font-feature-settings: "liga", "kern"; } main { max-width: var(--measure); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem) 5rem; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s; } a:hover { text-decoration-thickness: 2px; } ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); } /* ---------- header ---------- */ .site-header { max-width: var(--measure); margin: 0 auto; padding: clamp(1rem, 3vw, 1.6rem) clamp(1.1rem, 4vw, 2rem); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--rule); } .site-name { font-family: var(--serif-display); font-weight: 700; font-size: clamp(1.1rem, 1rem + 0.7vw, 1.4rem); letter-spacing: -0.01em; text-decoration: none; color: var(--ink); } .site-name:hover { color: var(--accent); } .site-header nav { display: flex; gap: clamp(0.9rem, 2.5vw, 1.4rem); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.09em; } .site-header nav a { text-decoration: none; color: var(--muted); } .site-header nav a:hover { color: var(--accent); } /* ---------- footer ---------- */ .site-footer { max-width: var(--measure); margin: 0 auto; padding: 2.2rem clamp(1.1rem, 4vw, 2rem) 3.5rem; font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--rule); } .site-footer a { color: inherit; } /* ---------- home / hero ---------- */ .hero { padding: clamp(2.4rem, 7vw, 4.5rem) 0 clamp(1.6rem, 4vw, 2.6rem); } .hero h1 { font-family: var(--serif-display); font-weight: 600; font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.7rem; } .hero-tagline { font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.8vw, 1.45rem); color: var(--accent); margin: 0 0 1rem; } .hero-desc { margin: 0; color: var(--muted); max-width: 52ch; } /* editorial index list instead of boxes */ .post-list { margin-top: clamp(1.2rem, 3vw, 2rem); } .card { padding: clamp(1.2rem, 3vw, 1.7rem) 0; border-top: 1px solid var(--rule); } .card:last-child { border-bottom: 1px solid var(--rule); } .card h2 { font-family: var(--serif-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 1vw, 1.65rem); line-height: 1.22; letter-spacing: -0.015em; margin: 0.25rem 0 0.45rem; } .card h2 a { text-decoration: none; color: var(--ink); } .card h2 a:hover { color: var(--accent); } .card p { margin: 0.3rem 0 0; color: var(--muted); } .card-meta, .post-meta { font-family: var(--serif-text); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0; } /* ---------- post ---------- */ .post h1 { font-family: var(--serif-display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 2.8vw, 2.8rem); line-height: 1.12; letter-spacing: -0.02em; margin: clamp(2rem, 5vw, 3rem) 0 0.8rem; } .post-meta { margin-bottom: 0.5rem; } .post-meta a { color: inherit; } .post-body { margin-top: 1.6rem; } .post-body > p:first-of-type { font-size: 1.08em; color: color-mix(in srgb, var(--ink) 88%, var(--bg)); } .post-body h2 { font-family: var(--serif-display); font-weight: 600; font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.6rem); line-height: 1.25; letter-spacing: -0.01em; margin: 2.6rem 0 0.7rem; } .post-body h3 { font-family: var(--serif-display); font-size: 1.15rem; margin: 2rem 0 0.5rem; } .post-body img { max-width: 100%; height: auto; border-radius: 6px; } .post-body blockquote { margin: 1.8rem 0; padding: 0.1rem 1.4rem; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; } .post-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem auto; width: 38%; } .post-body ul, .post-body ol { padding-left: 1.4rem; } .post-body li { margin: 0.35rem 0; } .post-body code { background: var(--card); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.88em; font-family: ui-monospace, "SF Mono", Menlo, monospace; } /* tables: editorial rules + horizontal scroll on small screens */ .table-wrap { overflow-x: auto; margin: 1.6rem 0; -webkit-overflow-scrolling: touch; } .post-body table { border-collapse: collapse; width: 100%; font-size: 0.92rem; line-height: 1.5; } .post-body th, .post-body td { padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); } .post-body th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); border-bottom: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); } .post-body tr:hover td { background: color-mix(in srgb, var(--card) 55%, transparent); } /* ---------- related ---------- */ .related { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--rule); } .related h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; margin: 0 0 0.8rem; } .related ul { list-style: none; margin: 0; padding: 0; } .related li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); } .related li:last-child { border-bottom: 0; } .related a { font-family: var(--serif-display); font-weight: 500; font-size: 1.05rem; text-decoration: none; color: var(--ink); } .related a:hover { color: var(--accent); } /* ---------- house ad (Lummi) ---------- */ .house-ad { margin: clamp(2.4rem, 6vw, 3.5rem) 0 1rem; border: 1px solid var(--rule); border-radius: 10px; background: color-mix(in srgb, var(--card) 70%, var(--bg)); padding: 1.1rem 1.3rem 1.3rem; } .house-ad__label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin: 0 0 0.7rem; } .house-ad__inner { display: flex; gap: 1rem; align-items: flex-start; } .house-ad__flame { font-size: 1.6rem; line-height: 1.2; } .house-ad__pitch { margin: 0 0 0.8rem; font-size: 0.98rem; } .house-ad__btn { display: inline-block; background: var(--accent); color: var(--accent-ink, #fff); padding: 0.5rem 1.05rem; border-radius: 7px; text-decoration: none; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em; } .house-ad__btn:hover { opacity: 0.92; color: var(--accent-ink); } /* ---------- adsense slot ---------- */ .ad-slot { margin: 1.8rem 0; min-height: 50px; } /* ---------- small screens ---------- */ @media (max-width: 540px) { .site-header { flex-direction: row; flex-wrap: wrap; row-gap: 0.3rem; } .house-ad__inner { flex-direction: column; gap: 0.5rem; } }