/* ============================================================ Berlin Buyers Club — Long COVID / ME-CFS Survey 2026 Design system: high-contrast black/white + one hot accent ============================================================ */ /* ---- Fonts ---- Loaded via licensed services in , no self-hosted woff: - Adobe Fonts kit (use.typekit.net/qhs6jpm.css): itc-avant-garde-gothic-pro (display) + avenir-next-lt-pro - Google Fonts: Inter (body — has the 500/600 weights the design relies on) NOTE: the Adobe kit only serves on domains whitelisted in the Adobe project. Add `berlinbuyersclub.github.io` and `localhost` there or the display font falls back. */ /* ---- Tokens ---- */ :root{ --ink:#0a0a0a; --paper:#f5f3ee; /* warm off-white, softer than pure white */ --paper-pure:#ffffff; --hot:#ff2b1f; /* alarm red — the single hot accent */ --hot-deep:#c8160c; --muted:#8a857c; --hair:rgba(10,10,10,.12); --serif:"Inter","avenir-next-lt-pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --display:"itc-avant-garde-gothic-pro","Inter",sans-serif; --maxw:1180px; --ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%;} body{ font-family:var(--serif); background:var(--paper); color:var(--ink); line-height:1.5; font-weight:500; overflow-x:hidden; max-width:100%; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } @supports (overflow-x:clip){ html,body{overflow-x:clip;} } body.is-dark{background:var(--ink);color:var(--paper);} /* ---- PROTOTYPE: BBC brand gradient on chrome + data-viz (type stays red/ink) ---- */ :root{ --bbc-grad:linear-gradient(95deg,#ff6738 0%,#fd40df 52%,#735eff 100%); } ::selection{background:var(--hot);color:#fff;} /* red section: a red selection highlight would vanish, so use black there */ .closing ::selection{background:var(--ink);color:#fff;} /* ---- Type ---- */ .display{ font-family:var(--display); font-weight:700; line-height:.95; letter-spacing:-.01em; text-transform:uppercase; } h1.display{font-size:clamp(2.8rem,9vw,8.5rem);} h2.display{font-size:clamp(2rem,6vw,5.2rem);} h3.display{font-size:clamp(1.4rem,3.2vw,2.6rem);} /* The Adobe Avant Garde kit ships weights 300 + 700 (the old self-hosted woff was 700-only). Body weight is 500, so display elements without an explicit weight would snap to 300 (Light). Force 700 wherever the display font is used. */ .bignum,.chart-label,.chapno,.plusrow,.bigquote,.verdict-punch,.exp-count,.exp-more, .bar-row .bl .v,.scalebar-row .bl .v,.hero .meta-line b,.closing a.btn, .split-spine::before,.split-spine::after{font-weight:700;} p{font-size:clamp(1.05rem,1.5vw,1.35rem);max-width:62ch;} .lead{font-size:clamp(1.25rem,2.3vw,1.9rem);font-weight:500;line-height:1.35;max-width:30ch;} /* ---- Hierarchy: data leads, headline supports ---- .kicker = small subordinate headline; .scene-note = small body text */ .kicker{ font-family:var(--display);font-weight:700;text-transform:uppercase; line-height:1;letter-spacing:-.005em; font-size:clamp(1.35rem,2.6vw,2.3rem); } .scene-note{font-size:clamp(1rem,1.25vw,1.18rem);max-width:54ch;font-weight:500;line-height:1.55;opacity:.92;} .scene--dark .scene-note{opacity:.88;} .chapno+.kicker{margin-top:.5rem;} .eyebrow{ font-family:var(--serif);font-weight:700;text-transform:uppercase; letter-spacing:.22em;font-size:.78rem;color:var(--hot); display:flex;align-items:center;gap:.6em; } .eyebrow::before{content:"+";font-weight:700;} .hot{color:var(--hot);} /* ---- Layout ---- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 6vw;width:100%;} section{position:relative;} .pad{padding:clamp(5rem,14vh,11rem) 0;} /* ============================================================ Top bar ============================================================ */ .topbar{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:flex-start;justify-content:space-between; padding:1.6rem; /* equal top & side padding — logo sits in the corner */ pointer-events:none; } .topbar .brand{display:flex;align-items:flex-start;pointer-events:auto;text-decoration:none;} /* white stacked mark by default; a scroll-spy adds body.topbar-dark over light sections, which inverts it to true black */ .topbar .brand img{height:88px;width:auto;display:block;transition:filter .3s var(--ease);} body.topbar-dark .topbar .brand img{filter:invert(1);} .lang-toggle{ display:flex;align-items:center;gap:.2rem;pointer-events:auto; font-family:var(--serif);font-weight:700;font-size:.8rem;letter-spacing:.08em; margin-left:auto;align-self:flex-start; /* always pinned to the right */ } .lang-toggle button{ background:none;border:none;color:#fff;opacity:.45;cursor:pointer; padding:.3rem .45rem;text-transform:uppercase;transition:opacity .3s,color .3s;font:inherit; } .lang-toggle button.active{opacity:1;} .lang-toggle .sep{opacity:.35;color:#fff;align-self:center;transition:color .3s;} body.topbar-dark .lang-toggle button, body.topbar-dark .lang-toggle .sep{color:var(--ink);} /* ---- Scroll progress ---- */ .progress{ position:-webkit-sticky;position:sticky;top:0;left:0;display:block;height:3px; margin-bottom:-3px; width:100%;z-index:2147483647;pointer-events:none; } .progress::before{ content:"";display:block;height:100%;width:var(--progress-width,0%); background:var(--bbc-grad);background-size:100vw 100%;background-repeat:no-repeat; } @media(hover:none) and (pointer:coarse){ .progress{display:none;} } /* compact header: keep the brand visible, but let the chrome scroll away before it starts competing with the content on narrower viewports */ @media(max-width:1380px){ .topbar{position:absolute;padding:clamp(1rem,4vw,1.6rem);} .topbar .brand img{height:clamp(64px,10vw,88px);} } /* ============================================================ Hero ============================================================ */ .hero{ min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-bottom:clamp(4rem,12vh,9rem); background:var(--ink);color:var(--paper);position:relative;overflow:hidden; } .hero .wrap{position:relative;z-index:2;} /* face sits above the text, left-aligned — identical layout in DE & EN */ .hero-stack{display:flex;flex-direction:column;align-items:flex-start;} .hero h1{color:var(--paper);} .hero h1 .hot{color:var(--hot);} /* per-line masks for the intro reveal (lines wrapped by JS) */ .hero h1 .hl-line{display:block;overflow:hidden;} .hero h1 .hl-inner{display:block;will-change:transform;} .hero .sub{margin-top:1.8rem;color:var(--paper);opacity:.82;max-width:46ch;font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:500;} .hero .meta-line{margin-top:2.6rem;display:flex;gap:2.5rem;flex-wrap:wrap;font-size:.9rem;letter-spacing:.04em;opacity:.7;} .hero .meta-line b{font-family:var(--display);font-size:1.6rem;display:block;color:var(--hot);} .hero-face{ width:clamp(190px,29vw,310px);margin-bottom:clamp(1.4rem,3vw,2.4rem);pointer-events:none; /* transparent white PNG — reads correctly on any background */ } .scroll-cue{ position:absolute;bottom:2.2rem;left:6vw;z-index:3; font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6; display:flex;align-items:center;gap:.6rem;color:var(--paper); } .scroll-cue::after{content:"";width:1px;height:34px;background:var(--paper);display:block;animation:cue 1.8s var(--ease) infinite;transform-origin:top;} @keyframes cue{0%,100%{transform:scaleY(.3);opacity:.3;}50%{transform:scaleY(1);opacity:.8;}} /* ============================================================ Generic scene scaffolding ============================================================ */ .scene{min-height:100svh;display:flex;align-items:center;} .scene--dark{background:var(--ink);color:var(--paper);} .scene--paper{background:var(--paper);} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;width:100%;} .grid2--blobL{grid-template-columns:1.25fr .75fr;} /* blob bigger (left) */ .grid2--blobR{grid-template-columns:.8fr 1.2fr;} /* blob bigger (right) */ @media(max-width:820px){ .grid2,.grid2--blobL,.grid2--blobR{grid-template-columns:1fr;gap:2.5rem;} } .stat-note{color:var(--muted);font-size:.95rem;margin-top:1rem;letter-spacing:.02em;} .scene--dark .stat-note{color:rgba(245,243,238,.55);} /* ---- Big number ---- */ .bignum{ font-family:var(--display);line-height:.82;letter-spacing:-.02em; font-size:clamp(5.5rem,22vw,17rem); } .bignum .unit{font-size:.32em;vertical-align:.45em;margin-left:.1em;} .bignum--hot{color:var(--hot);} /* ============================================================ Blob (organic SVG behind stats) ============================================================ */ .blob-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:48vh;} .blob-stage svg{position:absolute;width:115%;height:115%;left:-7.5%;top:-7.5%;overflow:visible;} .blob-stage .blob-label{position:relative;z-index:2;text-align:center;} .blob-stage .blob-label .bignum{display:block;} .blob-stage .blob-label .bignum{color:var(--paper);} .blob-stage .blob-label .cap{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.05;letter-spacing:-.01em;max-width:12ch;margin:.35rem auto 0;color:var(--paper);} /* small functional chart heading (e.g. "Was pacing explained?") */ .chart-label{font-family:var(--display);text-transform:uppercase;font-size:.98rem;letter-spacing:.015em;} /* ============================================================ Bars — big & confident. The percentage is the typographic event. ============================================================ */ .bars{display:flex;flex-direction:column;gap:clamp(1.3rem,2.2vw,1.9rem);width:100%;} .bar-row .bl{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:.7rem;} .bar-row .bl .lab{font-weight:600;font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.2;} .bar-row .bl .v{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.6rem);color:var(--hot);line-height:.85;letter-spacing:-.02em;white-space:nowrap;} .bar-track{height:16px;background:var(--hair);border-radius:999px;overflow:hidden;position:relative;} .scene--dark .bar-track{background:rgba(245,243,238,.13);} .bar-fill{height:100%;width:0;background:var(--ink);border-radius:999px;} .scene--dark .bar-fill{background:var(--paper);} .bar-fill.hot{background:var(--hot);} /* rank-1 row leads in red and slightly heavier (class is .bar-lead, not .lead, to avoid colliding with the .lead paragraph) */ .bar-row.bar-lead .bar-fill{background:var(--hot);} .bar-row.bar-lead .bl .lab{font-weight:700;} .bar-row.bar-lead .bl .v{font-size:clamp(2.2rem,4vw,3.4rem);} /* ---- Scale bars (0–10 averages) ---- */ .scalebars{display:flex;flex-direction:column;gap:clamp(1.6rem,2.8vw,2.4rem);width:100%;} .scalebar-row .bl{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:.7rem;} .scalebar-row .bl .lab{font-weight:600;font-size:clamp(1.05rem,1.5vw,1.35rem);max-width:34ch;line-height:1.2;} .scalebar-row .bl .v{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.8rem);color:var(--hot);line-height:.82;letter-spacing:-.02em;white-space:nowrap;} .scalebar-row .bl .v small{font-size:.32em;opacity:.55;font-family:var(--serif);font-weight:600;letter-spacing:0;} .bar-track.tall{height:clamp(24px,3vw,34px);} .scale-ends{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);font-weight:600;margin-top:.5rem;} .scene--dark .scale-ends{color:rgba(245,243,238,.5);} /* ============================================================ Split spread — two charts diverging from a central spine (left: where help was sought · right: how long the wait) ============================================================ */ .split{display:grid;grid-template-columns:1fr 2px 1fr;gap:clamp(1.6rem,4vw,3.4rem); margin-top:clamp(2.6rem,5vw,3.8rem);align-items:stretch;} .split-spine{align-self:stretch;background:rgba(245,243,238,.16);position:relative;} .split-spine::before,.split-spine::after{content:"+";position:absolute;left:50%; transform:translateX(-50%);color:var(--hot);font-family:var(--display);font-size:1.15rem;line-height:1;} .split-spine::before{top:-.55rem;} .split-spine::after{bottom:-.55rem;} .split-side{display:flex;flex-direction:column;} .split-h{margin-bottom:1.6rem;color:var(--hot);} .split-h--right{text-align:right;} /* direction-neutral intro text on stacked (mobile) layout */ .only-narrow{display:none;} /* left panel: bars grow inward, toward the spine (anchored right) */ .bars--toward .bar-track{display:flex;justify-content:flex-end;} /* right panel: the percentage sits by the spine (left), label runs outward */ .bars--from .bl{flex-direction:row-reverse;} /* the right side has fewer rows — give it airier spacing + a closing stat so it balances the taller left column */ .bars--airy{gap:clamp(2.2rem,4.2vw,3.4rem);} .bars--airy .bar-track{height:20px;} .split-punch{margin-top:auto;padding-top:clamp(2rem,4vw,3.2rem);text-align:right;} .split-punch .bignum{display:block;font-size:clamp(4.5rem,9.5vw,7.5rem);line-height:.82;} .split-punch p{font-size:clamp(1.2rem,1.6vw,1.5rem);font-weight:600;line-height:1.3;max-width:26ch;margin:.6rem 0 0 auto;} @media(max-width:820px){ .split{grid-template-columns:1fr;gap:2.8rem;} .split-spine{display:none;} .split-h--right{text-align:left;} .bars--toward .bar-track{justify-content:flex-start;} .bars--from .bl{flex-direction:row;} .bars--airy{gap:clamp(1.3rem,2.2vw,1.9rem);} .split-punch{text-align:left;margin-top:1.5rem;} .split-punch p{margin-left:0;} .only-wide{display:none;} .only-narrow{display:inline;} } /* ============================================================ Dot grid (waffle) — 1 dot per respondent ============================================================ */ .dotgrid{display:grid;grid-template-columns:repeat(22,1fr);gap:.55vw;width:100%;max-width:560px;} .dotgrid .dot{aspect-ratio:1;border-radius:50%;background:var(--hair);transform:scale(0);} .scene--dark .dotgrid .dot{background:rgba(245,243,238,.16);} .dotgrid .dot.on{background:var(--hot);} .dotgrid .dot.on2{background:var(--ink);} .scene--dark .dotgrid .dot.on2{background:var(--paper);} .legend{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem;font-size:.85rem;font-weight:500;} .legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.45rem;vertical-align:-1px;} /* ---- Distribution histogram (0-10) ---- */ .histo{display:flex;align-items:flex-end;gap:.5%;height:200px;width:100%;} .histo .hb{flex:1;background:var(--ink);border-radius:6px 6px 0 0;height:2%;position:relative;} .scene--dark .histo .hb{background:var(--paper);} .histo .hb.peak{background:var(--hot);} .histo .hb span{position:absolute;bottom:-1.5rem;left:0;right:0;text-align:center;font-size:.7rem;color:var(--muted);} .histo-axis{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:1.8rem;font-weight:500;} /* ============================================================ Quotes ============================================================ */ .quote-scene{background:var(--ink);color:var(--paper);overflow:hidden;} .bigquote{font-family:var(--display);text-transform:none;font-size:clamp(1.8rem,4.6vw,4rem);line-height:1.04;letter-spacing:-.01em;max-width:18ch;} .bigquote .q{color:var(--hot);} .quote-attr{margin-top:1.5rem;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;opacity:.55;} .quote-wall{column-count:3;column-gap:1.4rem;} @media(max-width:900px){.quote-wall{column-count:2;}} @media(max-width:600px){.quote-wall{column-count:1;}} .qcard{ break-inside:avoid;margin-bottom:1.4rem;padding:1.5rem;border-radius:18px; background:rgba(245,243,238,.06);border:1px solid rgba(245,243,238,.1); font-size:1rem;line-height:1.45; } .qcard .qtopic{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hot);margin-bottom:.7rem;font-weight:700;} .qcard .qlang{float:right;opacity:.4;font-weight:700;} /* ============================================================ Closing / CTA ============================================================ */ .closing{background:var(--hot);color:#fff;text-align:left;} .closing h2{color:#fff;} .closing .face{width:clamp(90px,16vw,150px);margin:0 0 2rem;display:block;} .closing a.btn{ display:inline-block;margin-top:2.2rem;background:#fff;color:var(--hot); font-family:var(--display);text-transform:uppercase;letter-spacing:.02em; padding:1rem 2.4rem;border-radius:999px;text-decoration:none;font-size:1.05rem; transition:transform .3s var(--ease); } .closing a.btn:hover{transform:scale(1.05);} /* tiny, subtle disclaimer — true black bg (no element-level opacity, which previously let the cream page bleed through and look grey) */ .footer{background:var(--ink);color:rgba(245,243,238,.42);text-align:center;padding:1.45rem 6vw 1.7rem;letter-spacing:.01em;} /* explicit size on the

— the global p{font-size} rule would otherwise win */ .footer p{font-size:.8rem;line-height:1.35;max-width:960px;margin:0 auto;} .footer p+p{margin-top:.45rem;} .footer-note{color:rgba(245,243,238,.58);} .footer-links{display:flex;gap:.5rem;align-items:center;justify-content:center;flex-wrap:wrap;} .footer a{color:rgba(245,243,238,.6);} .privacy-details{max-width:960px;margin:.8rem auto 0;} .privacy-details summary{ display:inline-flex;align-items:center;gap:.35rem;cursor:pointer; color:rgba(245,243,238,.68);font-size:.8rem;line-height:1.2; } .privacy-details summary::-webkit-details-marker{display:none;} .privacy-details summary::after{content:"+";font-weight:700;color:var(--hot);} .privacy-details[open] summary::after{content:"-";} .privacy-panel{ margin:1rem auto 0;padding-top:1rem;border-top:1px solid rgba(245,243,238,.16); text-align:left;color:rgba(245,243,238,.64); } .privacy-panel h3{ font-family:var(--display);font-size:.75rem;line-height:1.2;text-transform:uppercase; letter-spacing:.04em;color:rgba(245,243,238,.88);margin:1rem 0 .25rem; } .privacy-panel h3:first-child{margin-top:0;} .privacy-panel p{font-size:.78rem;line-height:1.45;max-width:none;} .privacy-panel p+p{margin-top:.5rem;} /* ---- section intro label ---- */ .chapno{font-family:var(--display);font-size:.9rem;color:var(--hot);letter-spacing:.1em;margin-bottom:1.2rem;} /* big plus motif divider */ .plusrow{display:flex;gap:1.5rem;justify-content:center;font-family:var(--display);color:var(--hot);font-size:2rem;padding:3rem 0;opacity:.5;} /* lang visibility */ [data-en]{display:none;} body.lang-en [data-en]{display:revert;} body.lang-en [data-de]{display:none;} body.lang-de [data-de]{display:revert;} body.lang-de [data-en]{display:none;} /* ============================================================ Arc gauge (the verdict) ============================================================ */ .arc-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;} .arc-wrap svg{width:min(86%,520px);height:auto;overflow:visible;} .arc-wrap .arc-bg{fill:none;stroke:var(--hair);stroke-width:14;stroke-linecap:round;} .scene--dark .arc-wrap .arc-bg{stroke:rgba(245,243,238,.14);} .arc-wrap .arc-fg{fill:none;stroke:url(#bbcGrad);stroke-width:14;stroke-linecap:round;} .arc-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;} .arc-center .bignum{font-size:clamp(3rem,8vw,6.2rem);color:var(--hot);line-height:.85;} .arc-center .cap{font-family:var(--display);font-weight:700;max-width:13ch;margin:.3rem auto 0;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.05;letter-spacing:-.01em;} .verdict-punch{font-family:var(--display);font-size:clamp(1.45rem,2.8vw,2.3rem);line-height:1.1;letter-spacing:-.01em;margin:1.4rem auto 0;text-align:center;max-width:20ch;} /* ============================================================ Quote explorer — filters on top, answers in a grid below ============================================================ */ .explorer{display:block;background:var(--ink);color:var(--paper);} .explorer-intro{width:100%; padding:clamp(5rem,14vh,11rem) max(6vw,calc((100vw - var(--maxw)) / 2)) 2rem;} .explorer-head{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.92); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); padding:1.3rem 6vw;border-top:1px solid rgba(245,243,238,.12);border-bottom:1px solid rgba(245,243,238,.12);} .explorer-head .wrap{padding:0;} .exp-toprow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between;} .exp-count{font-family:var(--display);font-size:1.1rem;white-space:nowrap;} .exp-count .hot{color:var(--hot);} .exp-search{flex:1;min-width:240px;display:flex;align-items:center;gap:.6rem; background:rgba(245,243,238,.08);border:1px solid rgba(245,243,238,.16); border-radius:999px;padding:.7rem 1.2rem;} .exp-search input{flex:1;background:none;border:none;color:var(--paper);font:inherit;font-size:1rem;outline:none;} .exp-search input::placeholder{color:rgba(245,243,238,.45);} .exp-search .x{cursor:pointer;opacity:.5;font-size:1.2rem;line-height:1;background:none;border:none;color:var(--paper);} .exp-filters{display:flex;flex-direction:column;gap:.7rem;margin-top:1.1rem;} .exp-group{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;} .exp-group>.glab{flex:0 0 auto;width:8rem;padding-right:.6rem;white-space:nowrap;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,243,238,.5);font-weight:700;} .chip{font:inherit;font-size:.82rem;font-weight:600;cursor:pointer; background:rgba(245,243,238,.06);border:1px solid rgba(245,243,238,.18);color:var(--paper); padding:.4rem .85rem;border-radius:999px;transition:all .2s;white-space:nowrap;} .chip:hover{border-color:rgba(245,243,238,.5);} .chip.active{background:var(--hot);border-color:var(--hot);color:#fff;} .exp-results{padding:2.5rem 6vw 1rem;display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.4rem;align-items:start;} @media(max-width:560px){.exp-results{grid-template-columns:1fr;}} .exp-card{padding:1.5rem;border-radius:18px; background:rgba(245,243,238,.05);border:1px solid rgba(245,243,238,.1);font-size:1rem;line-height:1.5; overflow-wrap:break-word;word-break:break-word;} .exp-card .topic{min-width:0;} .exp-card .meta{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.8rem;align-items:baseline;} .exp-card .topic{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hot);font-weight:700;} .exp-card .tags{font-size:.66rem;opacity:.5;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;} .exp-card mark{background:var(--hot);color:#fff;border-radius:3px;padding:0 .1em;} .exp-empty{grid-column:1/-1;text-align:center;opacity:.6;padding:4rem 0;font-size:1.1rem;} .exp-more{display:block;margin:1.5rem auto 0;background:none;border:1px solid rgba(245,243,238,.4); color:var(--paper);font:inherit;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em; padding:.9rem 2.2rem;border-radius:999px;cursor:pointer;transition:all .25s;font-size:.95rem;} .exp-more:hover{background:var(--paper);color:var(--ink);} /* mobile: collapse the filter chips behind a Filter toggle so they don't cover the screen */ .exp-filter-toggle{display:none;} @media(max-width:640px){ .exp-filter-toggle{display:inline-flex;align-items:center;gap:.45rem;order:3; font:inherit;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase; background:rgba(245,243,238,.08);border:1px solid rgba(245,243,238,.22);color:var(--paper); padding:.5rem 1rem;border-radius:999px;cursor:pointer;} .exp-filter-toggle.has-active-filters, .explorer-head:has([data-topic]:not([data-topic="all"]).active) .exp-filter-toggle, .explorer-head:has([data-langf]:not([data-langf="all"]).active) .exp-filter-toggle, .explorer-head:has([data-sev].active) .exp-filter-toggle, .explorer-head:has([data-persp].active) .exp-filter-toggle{ border-color:var(--hot);box-shadow:0 0 0 1px var(--hot); } .exp-filter-toggle::after{content:"\25be";font-size:1.2em;line-height:1;transition:transform .25s;} .explorer-head.filters-open .exp-filter-toggle::after{transform:rotate(180deg);} .exp-filters{display:none;} .explorer-head.filters-open .exp-filters{display:flex;} } /* On phones, browser chrome can change the live viewport height while scrolling. Keep long sections on stable content-based spacing so the page does not jump. */ @media(max-width:640px){ .pad{padding:4.75rem 0;} .scene{min-height:auto;} .blob-stage{min-height:22rem;overflow:hidden;} .blob-stage svg{width:100%;height:100%;left:0;top:0;} .explorer-intro{padding-top:4.75rem;} .exp-card .meta{flex-wrap:wrap;} .exp-card .tags{white-space:normal;overflow-wrap:anywhere;} } /* ---- reduced motion ---- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .scroll-cue::after{animation:none;} .bar-fill,.dot,.hb{transition:none !important;} }