/* ============================================================================ articles.css — /articles and /articles///. Generated pages (tools/build_articles.py); this file is hand-written. The article brand layer comes from fetch-marketing/BRAND_SYSTEM.md's editorial spec: IBM Plex Serif for headlines, IBM Plex Sans for body, and the article palette — navy #0C1A2C, teal #3DE0C4, amber #E8AA34, marine blue #4AA3E0. The navy/teal/amber/blue literals live here and only here; everything structural (surfaces, text, lines, spacing, radii) rides the site's tokens so dark theme works without a second palette. Category chips: the raw brand hues fail as small-text grounds on white (#3DE0C4 measures 1.6:1), so each chip is a TINT of its hue with dark ink — the same reasoning css/tokens.css records for splitting --accent from --accent-text. ========================================================================== */ :root { --art-navy: #0C1A2C; --art-teal: #3DE0C4; --art-amber: #E8AA34; --art-blue: #4AA3E0; --art-serif: 'IBM Plex Serif', Georgia, serif; --art-sans: 'IBM Plex Sans', var(--font-sans); --art-ground: #F7F9FA; --art-measure: 68ch; } :root[data-theme='dark'] { --art-ground: #091322; } /* ── page shell ─────────────────────────────────────────────────────────── */ .article-body { min-height: 100dvh; background: var(--art-ground); font-family: var(--art-sans); /* footer.js appends to ; the column keeps it under the content */ display: flex; flex-direction: column; } .article { flex: 1 0 auto; width: 100%; } /* ── head: chip, title, dek, byline row (no hero on the page) ───────────── */ .article__head { width: min(var(--art-measure), calc(100% - 2 * var(--sp-5))); margin: 0 auto; padding-top: clamp(var(--sp-8), 5vw, var(--sp-12)); } .article__meta { margin-bottom: var(--sp-4); } .article__title { font-family: var(--art-serif); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); /* ~32px → 48px */ line-height: 1.12; letter-spacing: -0.012em; } .article__dek { margin-top: var(--sp-4); color: var(--text-secondary); font-size: clamp(1.15rem, 2.4vw, 1.35rem); /* ~20–22px desktop */ font-weight: var(--fw-medium); line-height: 1.5; } .article__byline { display: flex; align-items: center; gap: var(--sp-3); margin-top: clamp(var(--sp-5), 3vw, var(--sp-6)); padding-block: var(--sp-4); border-block: 1px solid var(--line); } .article__avatar { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--art-navy); display: flex; align-items: center; justify-content: center; } /* a human author: the headshot fills the circle instead of sitting in it */ .article__avatar--photo { background: none; overflow: hidden; } .article__avatar--photo img { width: 100%; height: 100%; object-fit: cover; } .article__byline-who { display: flex; flex-direction: column; min-width: 0; } .article__byline-name { color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-label); } .article__byline-date { color: var(--text-muted); font-size: var(--fs-xs); } .article__share { margin-left: auto; display: flex; gap: var(--sp-2); } .article__share-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text-secondary); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .article__share-btn svg { width: 16px; height: 16px; } .article__share-btn:hover { background: var(--surface); color: var(--text); } /* the copy button's only feedback — no label swap, the ring says it landed */ .article__share-btn.is-copied { border-color: var(--accent); color: var(--accent-text); } /* ── body ───────────────────────────────────────────────────────────────── */ .article__body { width: min(var(--art-measure), calc(100% - 2 * var(--sp-5))); margin: 0 auto; padding: clamp(var(--sp-6), 4vw, var(--sp-8)) 0 clamp(var(--sp-10), 6vw, var(--sp-16)); color: var(--text-secondary); font-size: 1.0625rem; /* 17px mobile */ line-height: 1.7; } @media (min-width: 720px) { .article__body { font-size: 1.1875rem; } /* 19px desktop */ } /* generous, uniform flow spacing; headings/figures override below */ .article__body > * + * { margin-top: var(--sp-6); } .article__body h2 { font-family: var(--art-serif); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 1.8rem); line-height: 1.22; text-align: center; margin: clamp(var(--sp-10), 7vw, var(--sp-16)) 0 var(--sp-5); } .article__body h2:first-child { margin-top: 0; } .article__body h3 { font-family: var(--art-serif); font-weight: 600; font-size: 1.3rem; line-height: 1.25; text-align: left; letter-spacing: 0; margin: clamp(var(--sp-8), 5vw, var(--sp-10)) 0 var(--sp-4); } /* the ### stat run — a plain bold bullet list, one line per bullet */ .article__stats { margin-top: var(--sp-5); padding-left: 1.3em; } .article__stats li { list-style: disc; margin-top: var(--sp-2); } .article__stats li::marker { color: var(--accent); } .article__body strong { color: var(--text); } .article__body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } .article__list { margin: var(--sp-5) 0; padding-left: 1.2em; } .article__list li { list-style: disc; margin-top: var(--sp-3); } ol.article__list li { list-style: decimal; } .article__list li::marker { color: var(--accent); } .article__body blockquote { margin: var(--sp-6) 0; padding: var(--sp-2) var(--sp-5); border-left: 3px solid var(--art-teal); font-family: var(--art-serif); font-size: 1.15em; color: var(--text); } /* not a full-width line — a quiet centered glyph row */ .article__rule { margin: clamp(var(--sp-10), 6vw, var(--sp-16)) 0; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); letter-spacing: 0.35em; user-select: none; } /* ── inline figures: break out of the text column ───────────────────────── */ .article__figure { /* ~1.5× the reading column, capped; full-bleed minus a small gutter on phones. Centered on the column with margin math, no transforms. */ --fig-w: min(1100px, 100vw - 2 * var(--sp-4)); width: var(--fig-w); margin: clamp(var(--sp-8), 5vw, var(--sp-12)) 0 clamp(var(--sp-8), 5vw, var(--sp-12)) calc(50% - var(--fig-w) / 2); } .article__figure img, .article__figure video { display: block; width: 100%; /* natural aspect from the width/height attributes — never a fixed height, object-fit, border, radius, or shadow on inline figures */ height: auto; } .article__figure figcaption { max-width: 42rem; /* back to the reading column */ margin: var(--sp-3) auto 0; padding: 0 var(--sp-4); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); /* 15px */ line-height: 1.5; } /* ── category chips ─────────────────────────────────────────────────────── */ .art-chip { display: inline-block; padding: 3px 12px; border-radius: var(--r-pill); font-size: var(--fs-eyebrow); font-weight: var(--fw-label); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } .art-chip--surf { background: rgba(61, 224, 196, 0.18); color: #0A5A4C; } .art-chip--fishing { background: rgba(232, 170, 52, 0.20); color: #7A5210; } .art-chip--marine { background: rgba(74, 163, 224, 0.18); color: #1F5A85; } .art-chip--weather { background: rgba(12, 26, 44, 0.10); color: var(--art-navy); } :root[data-theme='dark'] .art-chip--surf { color: var(--art-teal); } :root[data-theme='dark'] .art-chip--fishing { color: var(--art-amber); } :root[data-theme='dark'] .art-chip--marine { color: var(--art-blue); } :root[data-theme='dark'] .art-chip--weather { background: rgba(255,255,255,0.10); color: var(--text-secondary); } /* ── produced-by footer (named authors only) ────────────────────────────── */ .article__producer { display: flex; align-items: center; gap: var(--sp-4); margin-top: clamp(var(--sp-8), 5vw, var(--sp-12)); padding-top: clamp(var(--sp-6), 4vw, var(--sp-8)); border-top: 1px solid var(--line); } .article__producer-avatar { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; } .article__producer-eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-label); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); } .article__producer-name { margin-top: var(--sp-1); font-family: var(--art-serif); font-weight: 600; font-size: 1.15rem; color: var(--text); } .article__producer-role { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-sm); } /* ── listing rows: index + "More articles" ──────────────────────────────── */ .art-list { display: block; } .art-row { display: flex; align-items: center; gap: var(--sp-4); width: 100%; padding: var(--sp-4) var(--sp-2); border-radius: var(--r-md); transition: background var(--dur-fast) var(--ease); } /* separator between rows, not around the list */ .art-row + .art-row { border-top: 1px solid var(--line); } .art-row:hover, .art-row:active { background: var(--surface); } /* a row gaining hover-radius must not double the hairline into the fill */ .art-row:hover + .art-row, .art-row:active + .art-row { border-top-color: transparent; } .art-row__thumb { width: 72px; height: 72px; flex: 0 0 auto; border-radius: var(--r-sm); object-fit: cover; background: var(--art-navy); } .art-row__text { min-width: 0; } .art-row__title { font-family: var(--art-serif); font-weight: 600; font-size: 1.15rem; line-height: 1.3; letter-spacing: 0; } .art-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); } @media (max-width: 560px) { .art-row__thumb { width: 56px; height: 56px; } .art-row__title { font-size: 1.05rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } .article__more { /* the list reads at the article's own measure, not the site shell's */ width: min(var(--art-measure), calc(100% - 2 * var(--sp-5))); margin: 0 auto; padding-bottom: clamp(var(--sp-10), 6vw, var(--sp-16)); } .article__more-title { font-family: var(--art-serif); font-weight: 700; font-size: 1.5rem; margin-bottom: var(--sp-6); } /* ── the index page ─────────────────────────────────────────────────────── */ .articles-head { /* matches the list rows below, so the filters left-align with the thumbs */ width: min(var(--art-measure), calc(100% - 2 * var(--sp-5))); margin: 0 auto; padding: clamp(var(--sp-8), 5vw, var(--sp-12)) 0 var(--sp-8); } .articles-head__title { font-family: var(--art-serif); font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); } .articles-head__sub { margin-top: var(--sp-3); color: var(--text-secondary); font-size: var(--fs-body-lg); max-width: 52ch; } .art-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); } .art-filter { padding: 7px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-elevated, var(--bg)); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .art-filter:hover { background: var(--surface); } .art-filter.is-active { background: var(--art-navy); border-color: var(--art-navy); color: #FFFFFF; } :root[data-theme='dark'] .art-filter.is-active { background: var(--art-teal); border-color: var(--art-teal); color: var(--art-navy); } .art-list--index { width: min(var(--art-measure), calc(100% - 2 * var(--sp-5))); margin: 0 auto; padding-bottom: clamp(var(--sp-12), 7vw, var(--sp-20)); }