/*! TOPIC PAGE HERO (Figma topic-page frames 5767:42477 / 5812:45751 — copied verbatim from the demo's app.css lines 2549–2626 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */ ip-topic-hero{display:flex;flex-direction:column;align-items:center;gap:var(--sp-normal);text-align:center;} .topic-hero__top{display:flex;flex-direction:column;align-items:center;gap:var(--sp-normal);} .topic-hero__logo{display:block;width:120px;height:120px;border-radius:50%;overflow:hidden;} .topic-hero__logo img{display:block;width:100%;height:100%;object-fit:cover;}/* the frames draw it as a FILLED highlight tag — radius 4, the static highlight surface, dark ink (5812:45751, re-read fresh 2026-08-11). The radius is a raw 4 in the file; the audit maps it to a token when the quota returns. */ .topic-hero__sponsor{display:inline-flex;align-items:center;padding:var(--sp-x-tight) var(--sp-tight);border-radius:4px;background:var(--bg-static-highlight);color:var(--bg-static-darkest);} .topic-hero__head{display:flex;flex-direction:column;align-items:center;} .topic-hero__title{margin:0;max-width:var(--maxw-article-top-hero);color:var(--content-primary);font:var(--ts-title-sm);letter-spacing:var(--ts-title-sm-ls);} .topic-hero__intro{margin:0;max-width:var(--maxw-article-top-hero);color:var(--content-primary);font:var(--ts-underline-md);} @container page (min-width:768px){ .topic-hero__title{font:var(--ts-title-md);letter-spacing:var(--ts-title-md-ls);} } @container page (min-width:1024px){ .topic-hero__title{font:var(--ts-title-lg);letter-spacing:var(--ts-title-lg-ls);} } /* --- the filter row --- ONE line that scrolls sideways when the chips outrun the page (the under-480 frame draws 480px of chips in a 362px hero): no wrapping. The scrollbar is hidden — the affordance is the cut-off chip. */ /* ONE pill holding the existing action-chips — the reuse IS the design: the chips inside carry no skin of their own, only the active one fills. Every value below is the binding read off the four brand frames (5906:54208 eye · 54286 shakuf · 54312 ham · 54338 boker), each drawn in both themes. NOTHING here may be a literal: the radius alone is 9999 in eye/shakuf and 14 in ham/boker, so a hardcoded pill radius silently stamps eye's shape on all four. Base .action-chip rules are untouched — everything here is scoped under .filter-pill, so the byline toolbar keeps its skin. */ .filter-pill{display:flex;gap:var(--sp-x-tight);padding:var(--sp-x-tight);max-width:min(100%, var(--maxw-article-top-hero));overflow-x:auto;scrollbar-width:none;border:var(--bw-thin) solid var(--border-strong);border-radius:var(--radius-button-primary);} .filter-pill::-webkit-scrollbar{display:none;} /* the chips carry NO fill and NO stroke; their radius is the base token, which is already `radius/button-primary` — the brand-correct shape. The theme's chip is a real link to the sibling topic's archive (C5) where the demo rebuilds the list in JS, so the UA underline goes too. */ .filter-pill .action-chip{flex:none;background:none;border-width:var(--bw-none);text-decoration:none;} /* the chip's own ink is `content/action-brand`, a colour picked for the toolbar's light surface. Inside the pill the row takes `content/primary` in all four brands and both themes. */ .filter-pill .action-chip .lbl, .filter-pill .action-chip .ic{color:var(--content-primary);} /* the selected chip: `bg/signal/action` filled, `content/white` ink. Both tokens already flip with the theme — dark fill + white ink on the light band, light fill + dark ink on the image — so there is no theme override to write here, and writing one would fight the token. */ .filter-pill .action-chip.is-active{background:var(--bg-signal-action);} .filter-pill .action-chip.is-active .lbl, .filter-pill .action-chip.is-active .ic{color:var(--content-white);} /* --- the band's background modes (set by the hero's right-click menu) --- a picker colour reuses the block tokens and the measured-ink stamp; an image brings the 35% mask and the constant 350 minimum height */ .hero-bg[data-bg="special-1"]{background:var(--bg-picker-special-1);} .hero-bg[data-bg="special-2"]{background:var(--bg-picker-special-2);} .hero-bg[data-bg="special-3"]{background:var(--bg-picker-special-3);} .hero-bg[data-bg="special-4"]{background:var(--bg-picker-special-4);} .hero-bg[data-bg]{color:var(--content-primary);} /* the image is the one the Figma hero actually carries, exported from the file's own fill — not a substitute picked from the demo's photo set */ .hero-bg[data-bg-set="image"]{position:relative;min-height:350px;display:flex;flex-direction:column;justify-content:center;background:url("../assets/topic-hero-bg.png") center/cover;} .hero-bg[data-bg-set="image"]::before{content:"";position:absolute;inset:0;background:var(--bg-alpha-mask-35);} .hero-bg[data-bg-set="image"] > *{position:relative;} /*! the port's own declaration, and the reason: the demo's filter chip is a