/* ============================================================ base.css — reset, typography, layout primitives, prose ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; } body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* `clip` contains the hero bleed without turning into a scroll container, which would break the sticky navbar. */ @supports (overflow-x: clip) { body { overflow-x: clip; } } img, picture, svg, video { max-width: 100%; display: block; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } table { border-collapse: collapse; width: 100%; } /* ── Headings ── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); line-height: var(--lh-snug); } h3 { font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: -0.005em; } h4 { font-size: var(--t-lg); line-height: var(--lh-snug); } /* The accent word inside a heading behaves like a highlighter stroke */ h1 span, h2 span, h3 span { color: var(--accent); } strong, b { font-weight: 700; } a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { text-decoration-style: solid; color: var(--accent); } /* ── Focus ── */ :focus { outline: none; } :focus-visible { outline: var(--bw-thick) solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); } ::selection { background: var(--accent-2); color: var(--accent-2-on); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-progress); background: var(--fg); color: var(--bg); padding: var(--s-3) var(--s-5); font-weight: 700; } .skip-link:focus-visible { left: var(--s-4); top: var(--s-4); } /* ── Layout ── */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); } /* Alternating page bands + the hand-drawn rule that separates them */ .band { padding-block: var(--band); background: var(--bg); } .band-alt { padding-block: var(--band); background: var(--bg-alt); } .band-tight { padding-block: clamp(28px, 4vw, 52px); } .rule { height: 8px; border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line); background-image: repeating-linear-gradient( -45deg, var(--line) 0 2px, transparent 2px 9px ); opacity: .5; } /* ── Section headings ── */ .section-title { text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: var(--s-3); } .section-sub { color: var(--fg-soft); font-size: var(--t-md); max-width: 62ch; margin-bottom: var(--s-6); } .section-title + .section-sub { margin-top: calc(var(--s-3) * -1 + var(--s-4)); } .u-center .section-sub, .center-head .section-sub { margin-inline: auto; } .center-head { text-align: center; } /* Eyebrow rule above section titles */ .section-title::before { content: ""; display: block; width: 64px; height: var(--bw-thick); background: var(--accent); margin-bottom: var(--s-4); } .center-head .section-title::before { margin-inline: auto; } /* ── Numeric chips: tabular monospace in a bordered box ── */ .num, .stat-value, .fstrip-val, .timer-num, .rtp-value, .games-stat-val, .sm-stat-num, .cat-count, .hl-num, .em-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.02em; } /* ── Prose / long-form ── */ .prose { max-width: var(--measure); } .prose > * + * { margin-top: var(--s-4); } .prose h2 { margin-top: var(--s-7); text-transform: uppercase; } .prose h3 { margin-top: var(--s-6); } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p { color: var(--fg-soft); } .prose strong { color: var(--fg); } .prose ul, .prose ol { padding-left: 1.15em; color: var(--fg-soft); } .prose li + li { margin-top: var(--s-2); } .prose li::marker { color: var(--accent); font-weight: 700; } .prose a { font-weight: 600; } /* ── Utilities (these replace every former inline style) ── Marked !important so a utility always wins over the component rule it is there to override (base.css loads before components.css). ── */ .u-center { text-align: center !important; } .u-row { display: flex !important; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .u-row-center { justify-content: center !important; } .u-row-start { justify-content: flex-start !important; } .u-row-lg { gap: var(--s-4); } .u-static { position: static !important; } .u-m0 { margin: 0 !important; } .u-mt-2 { margin-top: var(--s-2) !important; } .u-mt-3 { margin-top: var(--s-3) !important; } .u-mt-4 { margin-top: var(--s-4) !important; } .u-mt-5 { margin-top: var(--s-5) !important; } .u-mt-6 { margin-top: var(--s-6) !important; } .u-mt-7 { margin-top: var(--s-7) !important; } .u-mb-2 { margin-bottom: var(--s-2) !important; } .u-mb-4 { margin-bottom: var(--s-4) !important; } .u-mb-5 { margin-bottom: var(--s-5) !important; } .u-mb-6 { margin-bottom: var(--s-6) !important; } .u-note { font-size: var(--t-sm); color: var(--fg-soft); } .u-money { color: var(--money); } .u-strong-link { color: var(--accent); font-weight: 700; } .u-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .u-hide { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }