/* ============================================================ KINO ANNOUNCEMENTS — SHARED STYLESHEET One source of truth for every announcement page. Link this file in ; never override tokens inline. ------------------------------------------------------------ Fonts are open-source and self-hostable: Display/Body : "Newsreader" (serif, research-forward) UI/Labels : "Inter" (grotesque, clean) Data/Mono : "JetBrains Mono" Swap the @import for self-hosted @font-face before launch. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,16..72,400;0,16..72,500;0,16..72,600;1,16..72,400&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---- Color: clinical white + single accent ---- */ --ink: #14181d; /* near-black body text */ --ink-soft: #4a525c; /* secondary text, captions */ --ink-faint: #8a929c; /* metadata, footnotes */ --rule: #e4e7ea; /* hairline dividers */ --rule-soft: #f0f2f4; /* table zebra, hover */ --paper: #ffffff; /* page background (research) */ --paper-warm: #faf8f4; /* optional model-update wash */ --accent: #1f6feb; /* Kino accent — single use */ --accent-ink: #1450b0; /* accent text on white */ --accent-wash:#eef4fe; /* accent tint blocks */ --good: #1f9d6b; /* positive deltas in tables */ /* ---- Type scale (modular, ~1.25) ---- */ --fs-eyebrow: 0.8125rem; /* 13px category label */ --fs-meta: 0.875rem; /* 14px date / byline */ --fs-body: 1.1875rem; /* 19px reading size */ --fs-lead: 1.375rem; /* 22px lead paragraph */ --fs-h3: 1.375rem; /* 22px */ --fs-h2: 1.75rem; /* 28px section heads */ --fs-h1: 3rem; /* 48px title */ --fs-display: 3.75rem; /* 60px optional big stat */ --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.62; /* ---- Spacing rhythm (8px base) ---- */ --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem; --s-7: 6rem; --s-8: 8rem; /* ---- Layout ---- */ --measure: 680px; /* reading column — never wider */ --measure-wide: 960px;/* figures/tables may bleed to this*/ --gutter: 24px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Newsreader", Georgia, serif; font-size: var(--fs-body); line-height: var(--lh-body); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Body-class hook: research = white, model = warm wash */ body.model { background: var(--paper-warm); } /* ---------- Layout primitives ---------- */ .wrap { width: 100%; padding-inline: var(--gutter); } .col { max-width: var(--measure); margin-inline: auto; } .col-wide { max-width: var(--measure-wide); margin-inline: auto; } /* ---------- Top bar ---------- */ .topbar { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 10; } body.model .topbar { background: var(--paper-warm); } .topbar .col-wide { display: flex; align-items: center; justify-content: space-between; height: 60px; } .brand { font-family: "Inter", sans-serif; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .brand span { color: var(--accent); } .brand-logo { height: 28px; width: auto; display: block; } .topnav { display: flex; gap: var(--s-3); } .topnav a { font-family: "Inter", sans-serif; font-size: var(--fs-meta); color: var(--ink-soft); text-decoration: none; font-weight: 500; } .topnav a:hover { color: var(--accent-ink); } /* ---------- Article header ---------- */ .article-head { padding-top: var(--s-5); padding-bottom: var(--s-1); } .eyebrow { font-family: "Inter", sans-serif; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 var(--s-3); } h1.title { font-family: "Newsreader", serif; font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0 0 var(--s-3); color: var(--ink); } .meta { font-family: "Inter", sans-serif; font-size: var(--fs-meta); color: var(--ink-faint); margin: 0; display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; } .meta .dot { color: var(--rule); } /* ---------- Hero figure ---------- */ .hero { margin: var(--s-4) auto var(--s-5); } .hero img { width: 85%; height: auto; display: block; border-radius: 4px; margin-inline: auto} /* ---------- Prose ---------- */ /* IMPORTANT: every prose child is centered at --measure (680px). Any rule below that sets `margin` with the shorthand MUST use `auto` for the L/R values (e.g. `margin: 0 auto var(--s-3)`), never `margin: 0 0 …`, or the shorthand resets margin-inline and the element snaps to full width. */ .prose { padding-bottom: var(--s-6); } .prose > * { max-width: var(--measure); margin-inline: auto; } .lead { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--ink); font-weight: 400; margin: 0 auto var(--s-4); } .prose p { margin: 0 auto var(--s-3); } .prose h2 { font-family: "Newsreader", serif; font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.015em; color: var(--ink); margin: var(--s-6) auto var(--s-2); } .prose h3 { font-family: "Inter", sans-serif; font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); margin: var(--s-5) auto var(--s-2); } .prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .prose ul, .prose ol { margin: 0 auto var(--s-3); padding-left: 1.4em; } .prose li { margin-bottom: var(--s-1); } .prose strong { font-weight: 600; } /* Eyebrow-style label inside prose (e.g. "Updated") */ .section-label { font-family: "Inter", sans-serif; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: var(--s-6) auto var(--s-1); } /* ---------- Figures (may go wide) ---------- */ figure.fig { max-width: var(--measure-wide); margin: var(--s-5) auto; } figure.fig img { width: 100%; height: auto; display: block; border-radius: 4px; border: 1px solid var(--rule); } figure.fig figcaption { font-family: "Inter", sans-serif; font-size: var(--fs-meta); color: var(--ink-faint); margin-top: var(--s-2); } /* ---------- Data table (benchmark blocks) ---------- */ .table-block { max-width: var(--measure-wide); margin: var(--s-5) auto; } table.data { width: 100%; border-collapse: collapse; font-family: "Inter", sans-serif; font-size: var(--fs-meta); } table.data caption { text-align: left; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-2); } table.data th, table.data td { text-align: right; padding: 0.7em 1em; border-bottom: 1px solid var(--rule); } table.data th:first-child, table.data td:first-child { text-align: left; } table.data thead th { color: var(--ink-soft); font-weight: 600; border-bottom: 1.5px solid var(--ink); } table.data tbody tr:hover { background: var(--rule-soft); } table.data td.num { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; } table.data td.best { color: var(--accent-ink); font-weight: 600; } table.data .delta-up { color: var(--good); font-family: "JetBrains Mono", monospace; } /* ---------- Stat row (optional model hero) ---------- */ .stats { max-width: var(--measure-wide); margin: var(--s-5) auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s-4) 0; } .stat .n { font-family: "Newsreader", serif; font-weight: 500; font-size: var(--fs-display); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .stat .n .accent { color: var(--accent); } .stat .l { font-family: "Inter", sans-serif; font-size: var(--fs-meta); color: var(--ink-soft); margin-top: var(--s-1); } /* ---------- Pull quote ---------- */ blockquote.pull { max-width: var(--measure); margin: var(--s-5) auto; padding-left: var(--s-3); border-left: 3px solid var(--accent); font-style: italic; color: var(--ink); font-size: var(--fs-lead); line-height: var(--lh-snug); } blockquote.pull cite { display: block; margin-top: var(--s-2); font-style: normal; font-family: "Inter", sans-serif; font-size: var(--fs-meta); color: var(--ink-faint); } /* ---------- Callout / availability box ---------- */ .callout { max-width: var(--measure); margin: var(--s-5) auto; background: var(--accent-wash); border: 1px solid #d6e4fb; border-radius: 6px; padding: var(--s-3) var(--s-4); } .callout p { margin: 0; font-size: 1.0625rem; } /* ---------- Footnotes ---------- */ .footnotes { max-width: var(--measure); margin: var(--s-6) auto 0; padding-top: var(--s-3); border-top: 1px solid var(--rule); } .footnotes h4 { font-family: "Inter", sans-serif; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--s-2); } .footnotes ol { font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.5; padding-left: 1.3em; } .footnotes li { margin-bottom: var(--s-1); } /* ---------- Related content ---------- */ .related { border-top: 1px solid var(--rule); margin-top: var(--s-7); padding: var(--s-6) 0; } .related h4 { font-family: "Inter", sans-serif; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--s-4); text-align: left; } .related .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); } .card a { text-decoration: none; color: var(--ink); } .card .ctag { font-family: "Inter", sans-serif; font-size: var(--fs-eyebrow); color: var(--accent-ink); font-weight: 600; } .card h5 { font-family: "Newsreader", serif; font-weight: 500; font-size: 1.25rem; line-height: var(--lh-snug); margin: var(--s-1) 0 0; } .card:hover h5 { color: var(--accent-ink); } /* ---------- Footer ---------- */ .site-foot { border-top: 1px solid var(--rule); padding: var(--s-5) 0; } .site-foot .col-wide { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); font-family: "Inter", sans-serif; font-size: var(--fs-meta); color: var(--ink-faint); } .site-foot a { color: var(--ink-soft); text-decoration: none; } /* ---------- Responsive ---------- */ @media (max-width: 760px) { :root { --fs-h1: 2.25rem; --fs-h2: 1.5rem; --fs-display: 2.75rem; --fs-body: 1.125rem; --fs-lead: 1.25rem; } .article-head { padding-top: var(--s-5); } .stats { grid-template-columns: 1fr; gap: var(--s-3); } .related .grid { grid-template-columns: 1fr; } .topnav { display: none; } } /* ---------- Accessibility floor ---------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }