/* ============================================================ Shockwave CMS - base.css (ENGINE) Replaced wholesale by every engine update. Do not edit this file on a live site: put site rules in site.css, which loads after this one and is never touched by an update. Its job is to turn the CSS custom properties the CMS injects into (from Settings > Branding) into working defaults for every archetype, the nav, the footer, forms, and archives, so a fresh install looks like a deliberate, finished-but-unstyled document rather than raw HTML. Fallbacks are greyscale on purpose. A new install should read as deliberately unfinished rather than wearing another client's brand: if the starter shipped a real palette, every build would begin by undoing it. The moment Settings supplies tokens, these fallbacks stop applying. Conventions: - Everything sizes from --step-* so one change rescales the page. - Spacing uses the --space-* scale; blocks never set their own margins. - Layout responds with clamp() and auto-fit, so there are few breakpoints. - No !important anywhere except the reduced-motion block, which must win. ============================================================ */ /* ---- Tokens ------------------------------------------------------------ */ /* Brand tokens (--color-*, --font-*, heading scales) come from Settings and are injected above this file. Everything below is engine-owned and derived, so a site can override any of it in site.css without touching Branding. */ :root { /* --ink is the TEXT, --paper is the GROUND, which is what the words mean and what the Branding screen asks for. Until 1.8.0 this file had them the other way round: `body` set background:var(--ink) and color:var(--paper), so a designer entering a dark ink and a light paper, correctly, got a dark site. Following the labels produced the opposite of what they described. Fixed by swapping which token feeds which role. Every derived mix below is unchanged in shape, because each one is still a weighting of the two. */ --ink: var(--color-ink, #1A1A1A); --paper: var(--color-paper, #FFFFFF); --accent: var(--color-action, #333333); --muted: color-mix(in srgb, var(--ink) 60%, var(--paper)); --hairline: color-mix(in srgb, var(--ink) 18%, var(--paper)); --surface: color-mix(in srgb, var(--ink) 5%, var(--paper)); /* Type scale, fluid. --step-0 is body copy. */ --step--1: clamp(.83rem, .8rem + .15vw, .92rem); --step-0: clamp(1rem, .96rem + .2vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); --step-2: clamp(1.45rem, 1.25rem + 1vw, 2.1rem); --step-3: clamp(1.75rem, 1.4rem + 1.8vw, 3rem); --step-4: clamp(2.1rem, 1.5rem + 3vw, 4.2rem); /* Spacing scale. Blocks use --space-block for their own rhythm. */ --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --space-block: clamp(3rem, 7vw, 6rem); --measure: 68ch; --gutter: clamp(1.25rem, 5vw, 4rem); --wrap: var(--site-wrap, 1200px); /* Site chrome, content width */ --wrap-narrow: var(--site-wrap-narrow, 800px); /* Site chrome, narrow width */ --radius: .4rem; --radius-lg: .8rem; --border: 1px solid var(--hairline); --transition: 160ms ease; /* Letter-spacing for every uppercase label (eyebrow, badge, h6, footer headings). Uppercase needs positive tracking, and until 1.11.1 each rule carried its own literal with nothing to override. */ --caps-tracking: .1em; } /* ---- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } html:focus-within { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } img, picture, video, canvas, svg { display: block; max-inline-size: 100%; block-size: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[class], ol[class] { list-style: none; padding: 0; } /* ---- Base -------------------------------------------------------------- */ body { background: var(--paper); color: var(--ink); font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif); font-size: var(--step-0); line-height: var(--body-line, 1.6); letter-spacing: var(--body-tracking, normal); font-weight: var(--body-weight, 400); min-block-size: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, inherit); line-height: 1.1; text-wrap: balance; } h1 { font-size: var(--h1-size, var(--step-4)); font-weight: var(--h1-weight, 700); letter-spacing: var(--h1-tracking, -.02em); line-height: var(--h1-line, 1.05); text-transform: var(--h1-transform, none); } h2 { font-size: var(--h2-size, var(--step-3)); font-weight: var(--h2-weight, 700); letter-spacing: var(--h2-tracking, -.015em); line-height: var(--h2-line, 1.1); text-transform: var(--h2-transform, none); } h3 { font-size: var(--h3-size, var(--step-2)); font-weight: var(--h3-weight, 600); letter-spacing: var(--h3-tracking, normal); line-height: var(--h3-line, 1.2); text-transform: var(--h3-transform, none); } h4 { font-size: var(--h4-size, var(--step-1)); font-weight: var(--h4-weight, 600); } h5 { font-size: var(--h5-size, var(--step-0)); font-weight: var(--h5-weight, 600); } h6 { font-size: var(--h6-size, var(--step--1)); font-weight: var(--h6-weight, 600); text-transform: var(--h6-transform, uppercase); letter-spacing: var(--h6-tracking, var(--caps-tracking)); } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--transition); } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Skip link: out of the way until it is focused, then unmistakable. Moved rather than hidden, because display:none and visibility:hidden both take an element out of the tab order, which would make it unreachable by the only people who need it. */ .skip-link { position: absolute; inset-inline-start: var(--space-s); inset-block-start: -100%; z-index: 100; padding: .6em 1em; border-radius: var(--radius); background: var(--ink); color: var(--paper); text-decoration: none; transition: inset-block-start var(--transition); } .skip-link:focus { inset-block-start: var(--space-s); } /* Long-form copy from the rich text editor. */ .prose > * + * { margin-block-start: var(--space-s); } .prose { max-inline-size: var(--measure); } .prose h2, .prose h3 { margin-block-start: var(--space-l); } .prose ul, .prose ol { padding-inline-start: 1.25rem; } .prose li + li { margin-block-start: var(--space-3xs); } .prose blockquote { margin-inline-start: 0; padding-inline-start: var(--space-s); border-inline-start: 3px solid var(--accent); font-size: var(--step-1); } .prose img { border-radius: var(--radius); margin-block: var(--space-m); } /* ---- Layout primitives -------------------------------------------------- */ .wrap, .block > * { inline-size: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; } /* Every block renders inside section.block. Blocks own vertical rhythm; nothing inside a block sets its own outer margin. */ .block { padding-block: var(--space-block); } .block + .block { padding-block-start: 0; } /* Width, since 1.11.2. The page decides (body.layout-contained or body.layout-full, from the page, the collection, or Site chrome), and a block can choose otherwise with is-contained, is-narrow, or is-full. The widths themselves are --wrap and --wrap-narrow, emitted from Site chrome. Full width keeps the gutter and only the block's own children run wide; body copy still stops at --measure through .prose. */ .layout-full .block > *, .block.is-full > * { inline-size: calc(100% - (var(--gutter) * 2)); max-inline-size: none; } .block.is-contained > * { inline-size: min(100% - (var(--gutter) * 2), var(--wrap)); } .block.is-narrow > * { inline-size: min(100% - (var(--gutter) * 2), var(--wrap-narrow, 800px)); } /* A full-width block on a page that is otherwise contained loses the gutter too, so a hero image or a map reaches the viewport edge. Pre-1.11.2 documents stored `bleed: true`, which the renderer now emits as is-full. */ .block.is-full { padding-inline: 0; } .block.is-full > * { inline-size: 100%; } /* Align, since 1.11.2. Start is the default and needs no class. */ .block.align-centre { text-align: center; } .block.align-centre .block-body, .block.align-centre .block-subheading { margin-inline: auto; } .block.align-centre .hero-actions { justify-content: center; } .block.align-centre .cta-band-inner { justify-items: center; } .block.align-end { text-align: end; } .block.align-end .block-body, .block.align-end .block-subheading { margin-inline-start: auto; } .block.align-end .hero-actions { justify-content: flex-end; } .block.align-end .cta-band-inner { justify-items: end; } .block-eyebrow { font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--caps-tracking); color: var(--accent); margin-block-end: var(--space-2xs); } .block-heading { max-inline-size: 22ch; } .block-subheading { font-size: var(--step-1); color: var(--muted); max-inline-size: var(--measure); margin-block-start: var(--space-xs); } .block-body { max-inline-size: var(--measure); margin-block-start: var(--space-s); } /* Retired at 1.1.0 with the hero's hardcoded second link. Kept as a rule so a site.css written against it does not lose its spacing overnight; the class is no longer emitted by any template. */ .block-cta-link { display: inline-block; margin-block-start: var(--space-s); } /* ---- Calls to action ---------------------------------------------------- */ .cta--primary, .cta--secondary, .cta--tertiary { display: inline-block; padding: .8em 1.6em; border-radius: var(--radius); font-weight: 600; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition); } .cta--primary { background: var(--accent); color: var(--paper); } .cta--primary:hover { background: var(--ink); color: var(--paper); } .cta--secondary { border: 1px solid currentColor; color: var(--ink); } .cta--secondary:hover { border-color: var(--accent); color: var(--accent); } .cta--tertiary { padding-inline: 0; text-decoration: underline; } /* ---- Hero --------------------------------------------------------------- */ .hero-inner { display: grid; gap: var(--space-l); align-items: center; } [data-layout="split"] .hero-inner { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); } [data-layout="split"].is-reverse .hero-inner > .hero-media { order: -1; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block-start: var(--space-m); } /* ---- Page title --------------------------------------------------------- */ /* A page's own heading as a block. Deliberately plain: it is a heading and a line of detail, and anything more opinionated belongs in site.css. */ .block--role-title .page-title-inner { max-inline-size: var(--measure); } .page-title { margin: 0; } .page-title-meta { color: var(--muted); font-size: var(--step--1); margin-block-start: var(--space-2xs); } .hero-media img, .hero-media video { inline-size: 100%; border-radius: var(--radius-lg); } .block-bg { position: absolute; inset: 0; z-index: -1; object-fit: cover; inline-size: 100%; block-size: 100%; } .block:has(> .block-bg) { position: relative; isolation: isolate; } /* ---- CTA band ----------------------------------------------------------- */ .cta-band-inner { display: grid; gap: var(--space-m); justify-items: start; padding: var(--space-xl) var(--gutter); background: var(--surface); border-radius: var(--radius-lg); } .block.is-full .cta-band-inner { border-radius: 0; } /* ---- Grids -------------------------------------------------------------- */ .grid { display: grid; gap: clamp(1rem, 3vw, 2rem); margin-block-start: var(--space-l); } [data-layout="grid-2"] .grid { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); } [data-layout="grid-3"] .grid { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); } [data-layout="grid-4"] .grid { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); } /* Carousel: a permitted collection-grid layout. CSS only, on purpose. Scroll-snap gives real swipe on touch and trackpads, keyboard scrolling, and native momentum, with no script to load and nothing to break when JS fails. Items size by viewport rather than count, so one rule serves three cards or thirty. */ [data-layout="carousel"] .grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-block-end: var(--space-xs); } [data-layout="carousel"] .grid > * { flex: 0 0 clamp(16rem, 30%, 24rem); scroll-snap-align: start; } @media (max-width: 800px) { [data-layout="carousel"] .grid > * { flex-basis: min(80%, 20rem); } } /* ---- Cards -------------------------------------------------------------- */ .card { display: flex; flex-direction: column; gap: var(--space-2xs); block-size: 100%; background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-m); } .card-media { margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) 0; } .card-media img { inline-size: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-icon { font-size: var(--step-2); line-height: 1; color: var(--accent); } .card-badge { align-self: flex-start; font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--caps-tracking); background: var(--accent); color: var(--paper); padding: .2em .7em; border-radius: 1em; } .card-title { font-size: var(--step-1); } .card-body { color: var(--muted); } .card-cta { margin-block-start: auto; padding-block-start: var(--space-2xs); } /* ---- List and feature list ---------------------------------------------- */ .stack-list, .feature-list { display: grid; gap: var(--space-m); margin-block-start: var(--space-l); } .list-row, .feature-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; } .list-row:not(:last-child), .feature-item:not(:last-child) { padding-block-end: var(--space-m); border-block-end: var(--border); } .list-media img, .feature-media img { inline-size: clamp(4rem, 12vw, 7rem); border-radius: var(--radius); } .card-icon, .feature-icon { color: var(--accent); font-size: var(--step-2); line-height: 1; } .list-title { font-size: var(--step-1); } .list-body, .feature-body { color: var(--muted); max-inline-size: var(--measure); } .list-cta, .feature-cta { margin-block-start: var(--space-2xs); } /* ---- Gallery ------------------------------------------------------------ */ .gallery-grid { display: grid; gap: var(--space-s); margin-block-start: var(--space-l); } [data-layout="grid-2"] .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); } [data-layout="grid-3"] .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); } [data-layout="grid-4"] .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); } .gallery-item { margin: 0; } .gallery-item img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--radius); } .gallery-item figcaption { font-size: var(--step--1); color: var(--muted); margin-block-start: var(--space-3xs); } /* ---- Embed -------------------------------------------------------------- */ .block iframe { inline-size: 100%; aspect-ratio: 16 / 9; block-size: auto; border: 0; border-radius: var(--radius); } /* ---- Header and navigation ---------------------------------------------- */ /* Nav markup is structural: nested ul/li, data-depth on every item, the author's own class on the li, and .has-children where a submenu exists. Everything a mega menu needs is already here, so building one is a stylesheet job in site.css and never a schema change. */ .site-header { display: flex; align-items: center; gap: var(--space-m); inline-size: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; padding-block: var(--space-m); } .site-logo { margin-inline-end: auto; } .site-logo img { block-size: 2.5rem; inline-size: auto; max-inline-size: 100%; } /* A logo SVG exported with only a viewBox has no intrinsic size, so a max-block-size has nothing to resolve against and the element can collapse to nothing. A definite block-size gives it one; the viewBox supplies the ratio. max-inline-size keeps a wide wordmark from pushing the header sideways on a narrow screen. */ /* Header actions. Structure only: a row that does not wrap, sitting after the nav. The pair carries --primary and --secondary so a stylesheet can tell them apart without the author choosing a class. What they look like is site.css's job, which is why there is no background or border here. */ .site-header-actions { display: flex; align-items: center; gap: var(--space-s); margin-inline-start: var(--space-s); } .site-header-cta { white-space: nowrap; } .site-nav .nav-list { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; margin: 0; } .nav-item { position: relative; } .nav-item > a, .nav-heading { text-decoration: none; font-weight: 500; } .nav-heading { color: var(--muted); cursor: default; } /* Default submenu: a plain dropdown. Replace wholesale in site.css for a mega menu; the markup already supports it. */ .site-nav .nav-list--sub { display: grid; gap: var(--space-2xs); position: absolute; inset-block-start: 100%; inset-inline-start: 0; min-inline-size: 12rem; padding: var(--space-s); background: var(--surface); border: var(--border); border-radius: var(--radius); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); z-index: 20; } .nav-item.has-children:hover > .nav-list--sub, .nav-item.has-children:focus-within > .nav-list--sub { opacity: 1; visibility: visible; } @media (max-width: 800px) { .site-header { flex-wrap: wrap; } .site-nav { inline-size: 100%; } .site-nav .nav-list { gap: var(--space-s); } .site-nav .nav-list--sub { position: static; opacity: 1; visibility: visible; border: 0; padding: var(--space-2xs) 0 0 var(--space-s); background: none; } } /* ---- Footer ------------------------------------------------------------- */ /* Four independent regions so a designer can build a real footer without the engine deciding the layout. */ .site-footer { margin-block-start: var(--space-block); border-block-start: var(--border); } .footer-inner { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); inline-size: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; padding-block: var(--space-xl); } .footer-logo img, img.footer-logo { block-size: 2rem; inline-size: auto; max-inline-size: 100%; } .footer-logo--text { font-size: var(--step-1); font-family: var(--font-heading, inherit); } .footer-blurb { color: var(--muted); max-inline-size: 34ch; margin-block-start: var(--space-2xs); } .footer-nav-heading { font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--caps-tracking); color: var(--muted); margin-block-end: var(--space-2xs); } .footer-list { display: grid; gap: var(--space-3xs); } .footer-list--sub { padding-inline-start: var(--space-s); margin-block-start: var(--space-3xs); } .footer-social { display: flex; flex-wrap: wrap; gap: var(--space-s); } .footer-social--icons a { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: var(--border); border-radius: 50%; font-size: var(--step-0); } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Chrome regions, since 1.12.0: block stacks above the header and inside the footer. They are ordinary .block sections, so width, align, and every archetype rule apply; only the outer rhythm is tightened here. */ .site-bar .block, .footer-blocks .block { padding-block: var(--space-m); } .site-bar { border-block-end: var(--border); font-size: var(--step--1); } .footer-blocks { border-block-start: var(--border); } .footer-legal { inline-size: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; padding-block: var(--space-m); border-block-start: var(--border); font-size: var(--step--1); color: var(--muted); } /* ---- Forms -------------------------------------------------------------- */ .cms-form { display: grid; gap: var(--space-s); max-inline-size: 34rem; margin-block-start: var(--space-l); } .cms-form .field { display: grid; gap: var(--space-3xs); } .cms-form .field > span { font-size: var(--step--1); color: var(--muted); } .cms-form input, .cms-form textarea, .cms-form select { inline-size: 100%; padding: .7em .9em; background: var(--surface); border: var(--border); border-radius: var(--radius); color: var(--ink); } .cms-form textarea { min-block-size: 8rem; resize: vertical; } /* Tint the border on focus, but never at the cost of the ring: `outline: none` here used to override the :focus-visible rule above on the one set of controls that most needs a visible focus indicator. */ .cms-form input:focus, .cms-form textarea:focus, .cms-form select:focus { border-color: var(--accent); } /* A control's boundary is the only thing identifying it as a control, so it answers to the 3:1 non-text floor rather than to the hairline used for decorative rules. --hairline mixes paper at 18% and lands near 1.75:1 on the shipped palette; 45% clears the floor and still reads as a quiet border. Scoped to form controls on purpose: raising --hairline itself would change every border on every site, which is a design decision and not this. */ .cms-form input, .cms-form textarea, .cms-form select { border-color: color-mix(in srgb, var(--ink) 45%, var(--paper)); } .cms-form button { justify-self: start; } /* The asterisk is decoration beside the word "required", which is what actually carries the meaning. */ .cms-form .field-required { color: var(--accent); } /* Available to a screen reader, absent from the page. Not display:none and not visibility:hidden, because both remove it from the accessibility tree, which is the one place it needs to exist. */ .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Consent is a checkbox beside its label, never a labelled input above one. */ .cms-form .field--consent { display: flex; align-items: flex-start; gap: var(--space-2xs); } .cms-form .field--consent input { inline-size: auto; margin-block-start: .25rem; flex: 0 0 auto; } .cms-form .field--consent span { font-size: var(--step--1); } .form-success { padding: var(--space-s); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid var(--accent); } .form-error, .form-missing { color: #ff6b6b; font-size: var(--step--1); } .cf-turnstile { margin-block: var(--space-2xs); } /* ---- Single entry ------------------------------------------------------- */ .entry-single { padding-block: var(--space-block); } .entry-hero img { inline-size: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-lg); margin-block: var(--space-m); } .entry-meta { font-size: var(--step--1); color: var(--muted); margin-block-start: var(--space-2xs); } /* Byline and terms. Both are optional in the template and both are quiet here: they sit around the writing, they are not the writing. */ .entry-byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs); font-size: var(--step--1); color: var(--muted); margin-block-start: var(--space-xs); } .entry-author { font-weight: 600; color: var(--ink); } .entry-terms { display: grid; gap: var(--space-xs); margin-block-start: var(--space-l); padding-block-start: var(--space-s); border-block-start: var(--border); max-inline-size: var(--measure); } .entry-termset { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs); } .entry-termset-label { font-size: var(--step--1); color: var(--muted); margin-inline-end: var(--space-2xs); } .entry-term { font-size: var(--step--1); padding: .25em .7em; border: var(--border); border-radius: 1em; text-decoration: none; } a.entry-term:hover { border-color: var(--accent); color: var(--accent); } .entry-body { margin-block-start: var(--space-l); } /* ---- Archive ------------------------------------------------------------ */ .archive { padding-block: var(--space-block); } .archive-head { margin-block-end: var(--space-l); } .archive-intro { color: var(--muted); max-inline-size: var(--measure); margin-block-start: var(--space-xs); } .archive-filter { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-s); font-size: var(--step--1); color: var(--muted); margin-block-start: var(--space-s); } .archive-filter strong { color: var(--ink); } .archive-filter-clear { text-decoration: underline; } .archive-grid, .feed { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); } .feed-item { display: grid; gap: var(--space-2xs); } .feed-thumb img { inline-size: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius); } .feed-link { text-decoration: none; } .feed-link:hover { color: var(--accent); } .archive-empty { color: var(--muted); } .pager { display: flex; align-items: center; gap: var(--space-s); margin-block-start: var(--space-xl); } .pager-status { color: var(--muted); font-size: var(--step--1); } .pager-next { margin-inline-start: auto; } .pager-link { text-decoration: none; padding: .5em 1em; border: var(--border); border-radius: var(--radius); } .pager-link:hover { border-color: var(--accent); } .is-disabled { opacity: .4; pointer-events: none; } /* ---- Utility ------------------------------------------------------------ */ .hp { position: absolute; left: -9999px; } /* honeypot, never visible */