/* HAN basis: Avenir Next / Avenir Next Condensed, HAN red, white and black.
   Sources: HAN huisstijlindex (typografie, kleuren, plaatsingsprincipes)
   and HAN_Merkarchitectuur_211606.pdf, pages 6 and 11 (website wordmark).
   Use installed Avenir fonts; licensed webfont files can be added when available. */
:root {
 --font-body:"Avenir Next",Arial,sans-serif;
 --font-heading:"Avenir Next Condensed","Arial Narrow",Arial,sans-serif;
 --han-pink:#e50056; --pink:#e50056; --page-width:1320px;
}
html[data-theme="light"] {
 --paper:#fff; --surface:#f8f8f8; --ink:#151515; --muted:#595959; --line:#e3e3e3;
 --accent-ink:#e50056; --lime:#e50056;
}
html[data-theme="dark"] {
 --paper:#141414; --surface:#202020; --ink:#fff; --muted:#bcbcbc; --line:#3a3a3a;
 --accent-ink:#fff; --lime:#fff;
}
html[data-theme] body { font-family:var(--font-body); background:var(--paper); }
html h1, html h2, html h3, html h4 { font-family:var(--font-heading); }
html header .logo { gap:30px; }
html header .logo-title-link { border:0; padding:0; }
.logo-name { font-family:var(--font-heading); font-size:27px; font-weight:700; line-height:1; color:var(--ink); }
html header .nav-link { font-family:var(--font-body); }
html header .nav-link.active { background:transparent; box-shadow:inset 0 -2px var(--han-pink); border-radius:0; }
html header .nav-link[data-page="contact"], html[data-kiosk] header .nav-link.kiosk-info { background:var(--han-pink); color:#fff; border-radius:3px; }
html header .nav-link[data-page="contact"]:hover { background:#bd0047; }
html .lab-button.lime, html .lab-button.dark { background:var(--han-pink); color:#fff; border-radius:3px; }
html .lab-button.lime:hover, html .lab-button.dark:hover { background:#bd0047; }
html .journey-progress { display:none; }
html .story-sticky { width:min(var(--page-width),calc(100% - var(--page-gutter)*2)); }

.lab-introduction {
 display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,72px);
 width:100%; max-width:1200px; margin-inline:auto;
 align-items:center; padding:64px 0 80px; min-height:610px;
}
.lab-introduction h1 { font-size:clamp(64px,6.7vw,104px); font-weight:700; line-height:1; letter-spacing:-.02em; margin:0 0 16px; }
.lab-introduction h2 { font-size:clamp(28px,3vw,42px); font-weight:600; line-height:1.15; letter-spacing:0; margin:0 0 28px; color:var(--han-pink); }
.lab-introduction p { font-size:17px; line-height:1.8; max-width:630px; color:var(--muted); margin:0 0 18px; }
.lab-introduction .lab-lead { font-size:20px; line-height:1.7; color:var(--ink); }
.lab-introduction-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 28px; margin-top:30px; }
.lab-introduction-actions .text-link { font-size:14px; }
.lab-entry { display:flex; align-items:center; gap:24px; min-height:112px; padding:20px 0; border-top:1px solid var(--line); color:var(--ink); }
.lab-entry:last-child { border-bottom:1px solid var(--line); }
.lab-entry h3 { font-size:27px; font-weight:600; line-height:1.2; margin:0 0 8px; letter-spacing:0; }
.lab-entry p { font-size:14px; line-height:1.7; margin:0; }
.lab-entry > span { font-size:26px; margin-left:auto; color:var(--accent-ink); }
.lab-entry:hover h3 { text-decoration:underline; text-underline-offset:4px; }

html[data-page="discover"] .discovery-hero { background:var(--surface); border-radius:4px; }
html[data-page="discover"] .hero-copy h2 { font-weight:600; letter-spacing:-.015em; font-size:clamp(42px,4vw,64px); }
.project-context { font-size:14px; line-height:1.5; margin:0 0 16px; color:var(--muted); }
html .data-art.knowledge-atlas {
 --ink:#fff; --muted:#bcbcbc; --line:#ffffff30; --surface:#252525; --lime:#fff;
 background:#191919; border-color:#ffffff25; border-radius:4px;
}
.cloud-node-label { background:#222; border-radius:4px; }
.cloud-node-label:hover, .cloud-node-label[aria-pressed="true"] { background:#353535; }
.cloud-question { background:var(--han-pink); color:#fff; border-color:var(--han-pink); }
.cloud-detail strong { font-family:var(--font-heading); font-weight:600; font-size:24px; }
.cloud-detail a { text-decoration:underline; text-underline-offset:4px; }
html .cloud-steps button[aria-current="step"] { border-bottom-color:var(--han-pink); }
html .cloud-questions button { border-radius:4px; }
html .cloud-questions button[aria-pressed="true"] { background:var(--han-pink); border-color:var(--han-pink); color:#fff; }
html .project-showcase { background:var(--surface); }
html .story-copy h2, html .knowledge-intro h2, html .inspiration-title,
html .lab-section-heading h2, html .playground-copy h2, html .radar-page-title,
html .lab-invitation h2, html .page-header h2, html .article-reader h2,
html #inspiration-dialog-title { font-weight:600; letter-spacing:-.015em; }
html[data-theme="light"] .story-copy h2 em, html[data-theme="light"] .inspiration-title em { color:var(--han-pink); }
html .eyebrow, html .micro-label, html .story-hint, html .inspiration-toolbar > span,
html .radar-category, html .radar-source, html .experiment-heading,
html .inspiration-card-foot, html .article-editorial { font-family:var(--font-body); letter-spacing:0; }
html .eyebrow { font-size:13px; }
html .micro-label, html .story-hint { font-size:12px; }
html .window-bar { letter-spacing:0; font-size:11px; }
html .pink-square { display:none; }
@media (min-width:1700px) {
 :root { --page-width:1440px; }
 .lab-introduction { max-width:1280px; min-height:650px; padding-block:64px 80px; }
 .lab-entry { min-height:124px; }
 .lab-introduction .lab-lead { font-size:22px; }
}
@media (max-width:1100px) {
 .lab-introduction { gap:40px; padding-block:48px 64px; min-height:550px; }
 .lab-introduction .lab-lead { font-size:18px; }
 .lab-introduction p { font-size:16px; }
}
@media (max-width:800px) {
 .lab-introduction { grid-template-columns:1fr; gap:32px; padding-block:32px 48px; }
 .lab-introduction h1 { font-size:68px; }
 .lab-introduction h2 { font-size:32px; }
 .lab-entry { min-height:0; padding-block:20px; }
 .lab-introduction p { max-width:650px; }
}
@media (max-width:650px) {
 html header .logo { gap:22px; }
 .logo-name { font-size:23px; }
 .lab-introduction h1 { font-size:56px; }
 .lab-introduction h2 { font-size:28px; margin-bottom:22px; }
 .lab-introduction .lab-lead { font-size:18px; }
 .lab-introduction-actions { margin-top:24px; gap:8px 22px; }
 .lab-entry h3 { font-size:25px; }
 html[data-page="discover"] .hero-copy h2 { font-size:40px; }
}

/* Keep movement in the content, with restrained feedback around it. */
.lab-entry > span { transition:transform .2s ease; }
.lab-entry:hover > span { transform:translateX(5px); }
html .possibility-card, html .inspiration-card { background:var(--surface); color:var(--ink); border-color:var(--line); }
html #possibility-stack .possibility-card:hover { background:var(--paper); }
html .example-brief, html .possibility-card .micro-label { color:var(--muted); }
@media (prefers-reduced-motion:no-preference) {
 .lab-introduction-copy { animation:lab-arrive .65s ease-out both; }
 .lab-entries { animation:lab-arrive .65s .1s ease-out both; }
 @keyframes lab-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
}

/* Keep the project introduction in normal flow above its animated preview. */
.knowledge-story .story-sticky {
 display:flex; flex-direction:column; gap:28px; height:auto;
 min-height:calc(100svh - var(--header-height)); padding:36px 0;
}
.knowledge-story .knowledge-intro { position:relative; inset:auto; transform:none; opacity:1; flex-shrink:0; }
.knowledge-story .knowledge-intro .eyebrow { margin:0 0 12px; }
.knowledge-story .knowledge-intro h2 { font-size:clamp(38px,4vw,64px); line-height:1.05; margin:0 0 16px; }
.knowledge-story .knowledge-intro p:not(.eyebrow) { margin:0; font-size:16px; line-height:1.65; }
.knowledge-story .knowledge-window {
 position:relative; inset:auto; width:min(1080px,88%); margin:0 auto; flex-shrink:0;
 transform:perspective(1600px) rotateX(calc((1 - var(--chapter-progress))*6deg)); transform-origin:center bottom;
}
.knowledge-story .knowledge-window > img { height:clamp(220px,30vh,360px); }
.knowledge-story .floating-insight { display:none; }
@media(max-width:800px), (max-height:800px) {
 .knowledge-story { height:auto; }
 .knowledge-story .story-sticky { position:relative; top:auto; min-height:0; padding-block:48px; }
 .knowledge-story .knowledge-window { transform:none; width:100%; }
 .knowledge-story .knowledge-intro { text-align:left; }
 .knowledge-story .knowledge-intro p br { display:none; }
 .knowledge-story .knowledge-caption { flex-wrap:wrap; }
}

/* Editorial structure informed by han.nl and CMD026: one hero, clear routes,
   generous image areas and a separate story about the people behind the work. */
:root { --page-width:1160px; }
html[data-theme] body > header { background:#000; border-color:#292929; }
html header .logo img.han-logo { filter:brightness(0) invert(1); }
html header .logo-name, html header .nav-link, html header .theme-switch, html header .mobile-menu-toggle { color:#fff; }
html header .nav-link:hover, html header .nav-link.active { color:#fff; background:#161616; }
html header .theme-switch, html header .mobile-menu-toggle { border-color:#555; border-radius:0; }
html header .theme-switch:hover, html header .mobile-menu-toggle:hover { background:#242424; }
html header .nav-link[data-page="contact"] { border-radius:0; }
html .lab-button { border-radius:0 !important; min-height:56px; font-size:14px; }
#page-discover > .discovery-shell:first-child { width:100%; padding:0; }
#chapter-start { width:min(var(--page-width),calc(100% - var(--page-gutter)*2)); margin:48px auto 0; scroll-margin-top:calc(var(--header-height) + 16px); }
html .lab-introduction { display:block; width:100%; max-width:none; min-height:0; padding:0; margin:0; }
.lab-hero { position:relative; isolation:isolate; overflow:hidden; min-height:650px; background:#101014; color:#fff; }
#lab-hero-canvas, .lab-hero-fallback { position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.lab-hero-fallback { object-fit:cover; object-position:right; opacity:.2; }
.lab-hero.has-graph .lab-hero-fallback { display:none; }
.lab-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#101014 8%,#101014d9 28%,#10101400 48%); z-index:-1; }
html .lab-introduction-copy { width:min(var(--page-width),calc(100% - var(--page-gutter)*2)); margin:0 auto; padding:82px 0 100px; }
html .lab-introduction h1 { max-width:600px; font-size:clamp(58px,6.2vw,94px); line-height:1; text-transform:uppercase; margin-bottom:18px; }
html .lab-introduction h1::before { content:''; display:block; width:96px; height:14px; background:var(--han-pink); transform:rotate(-12deg); margin:0 0 40px 2px; }
html .lab-introduction h2 { color:#fff; max-width:550px; font-size:clamp(28px,2.7vw,40px); margin-bottom:24px; }
html .lab-introduction .lab-lead { color:#e8e8e8; max-width:525px; font-size:19px; line-height:1.7; }
html .lab-introduction-actions .text-link { color:#fff; border:1px solid #ffffff80; padding:12px 20px; min-height:56px; }
.hero-visual-caption { position:absolute; bottom:24px; right:max(var(--page-gutter),calc((100vw - var(--page-width))/2)); display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.hero-visual-caption button { min-height:44px; border:0; padding:8px 0; background:none; color:#ddd; font:12px var(--font-body); }
.hero-visual-caption [data-scroll-cloud] { font-size:14px; color:#fff; text-decoration:underline; text-underline-offset:5px; }
html .lab-entries { width:min(var(--page-width),calc(100% - var(--page-gutter)*2)); margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:36px 0; animation:none; }
html .lab-entry { min-height:0; border:0; border-right:1px solid var(--line); padding:8px 22px; gap:12px; align-items:flex-start; }
html .lab-entry:first-child { padding-left:0; }html .lab-entry:last-child { padding-right:0; border:0; }
html .lab-entry h3 { font-size:25px; }html .lab-entry p { font-size:13px; line-height:1.6; }
html .lab-entry > span { font-size:22px; }
html .community-story { height:auto; background:var(--surface); margin:48px 0 0; }
html .community-story .story-sticky { position:relative; top:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:56px; height:auto; min-height:0; padding:76px 0; }
html .community-story .knowledge-intro { position:static; text-align:left; }
html .community-story .knowledge-intro h2 { font-size:clamp(38px,4vw,56px); text-transform:uppercase; }
.community-story .knowledge-intro h3 { font-size:27px; margin:24px 0 16px; }
html .community-story .knowledge-intro p:not(.eyebrow) { font-size:16px; line-height:1.8; margin:0 0 18px; }
html .community-story .knowledge-intro .community-funding { font-size:13px; }
html .community-story .knowledge-window { width:100%; margin:0; border:0; border-radius:0; transform:none; box-shadow:none; background:var(--paper); }
html .community-story .knowledge-window > img { height:auto; aspect-ratio:3/2; object-fit:cover; }
.community-photo figcaption { padding:12px 18px; font-size:11px; color:var(--muted); }
.community-photo figcaption a { color:inherit; text-decoration:underline; }
.community-results { padding:22px; border-top:1px solid var(--line); }
.community-results > span { font-size:13px; color:var(--muted); }
.community-results .text-link { display:flex; font-size:15px; }
html .project-showcase { background:var(--paper); color:var(--ink); padding-block:64px; }
html .project-showcase .eyebrow, html #showcase-count, html .showcase-copy p, html .showcase-bottom { color:var(--muted); }
html .showcase-card { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:0; }
html .showcase-image { background:var(--line); }
html .showcase-copy h3 { font-size:27px; }.showcase-copy { padding:24px; }
html .showcase-copy p { font-size:14px; }
html .showcase-copy > span, html .showcase-bottom a { color:var(--ink); }
html .showcase-badge { background:var(--paper); color:var(--ink); }
html .round-control { color:var(--ink); border-color:var(--line); border-radius:0; }
html .round-control:hover { background:var(--han-pink); color:#fff; }
html .showcase-track { scrollbar-color:var(--muted) transparent; }
html .inspiration-card, html .possibility-card, html #possibility-stack .possibility-card { border-radius:0; }
html .radar-card, html .experiment-board, html .tool-card, html .contact-panel { border-radius:0; }
html .inspiration-filters [aria-pressed="true"], html .radar-filters [aria-pressed="true"] { background:var(--han-pink); color:#fff; border-color:var(--han-pink); }
html .inspiration-art::after { color:#fff; }
html .article-try { background:var(--paper); border-color:var(--han-pink); }
html .radar-cover .radar-category { background:#161616e8; border-color:#ffffff55; color:#fff; }
html .radar-cover-fallback { color:#ddd; background:linear-gradient(135deg,#333,#181818); }
html .lab-section-heading h2 { font-size:clamp(32px,3.5vw,48px); }
@media(min-width:1700px) { :root { --page-width:1360px; } }
@media(max-width:1100px) {
 html header .nav-links { background:#111; border-color:#444; }
 html .lab-introduction-copy { padding-block:64px 100px; }
 html .community-story .story-sticky { gap:32px; }
 html .lab-entries { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 0; }
 html .lab-entry:nth-child(2) { border:0; }.lab-entry:nth-child(3) { padding-left:0; }
}
@media(max-width:800px) {
 html .community-story .story-sticky { grid-template-columns:1fr; padding-block:48px; }
 html .lab-hero { min-height:0; }
 .lab-hero::after { background:linear-gradient(90deg,#101014f5,#101014a6); }
 html .lab-introduction-copy { padding-block:48px 100px; }
 .hero-visual-caption { align-items:flex-start; left:var(--page-gutter); right:auto; bottom:16px; flex-direction:row; gap:18px; }
 html .lab-introduction .lab-lead { font-size:17px; }
 html .lab-entry h3 { font-size:24px; }
}
@media(max-width:480px) {
 html .lab-introduction h1 { font-size:56px; }
 html .lab-introduction h1::before { width:72px; height:11px; margin-bottom:30px; }
 html .lab-introduction h2 { font-size:29px; }
 html .lab-entries { padding-block:24px; gap:18px; }
 html .lab-entry, html .lab-entry:first-child, html .lab-entry:last-child { padding:0 0 18px; border:0; border-bottom:1px solid var(--line); }
 html .lab-entry > span { display:none; }
 html .lab-entry h3 { font-size:23px; }.hero-visual-caption { gap:12px; }
 .hero-visual-caption [data-scroll-cloud] { font-size:12px; }.hero-visual-caption button { font-size:10px; }
}

/* Give the scroll story its own breathing room, without a grey page-sized card. */
html #chapter-start { margin-top:104px; margin-bottom:88px; }
html[data-page="discover"] .discovery-hero { background:transparent; border:0; border-radius:0; padding:28px 0 0; column-gap:48px; }
html[data-page="discover"] .hero-copy h2 { font-size:clamp(42px,4.1vw,64px); max-width:520px; min-height:2.1em; }
html[data-page="discover"] .hero-intro { min-height:7em; }
html .data-art.knowledge-atlas { background:#141414; border-color:transparent; border-radius:0; }
html[data-theme="dark"] .data-art.knowledge-atlas { background:transparent; }
html .knowledge-atlas .cloud-detail { border-top-color:#ffffff35; }
html .cloud-steps button[aria-current="step"] { font-weight:600; }
html .discovery-hero[data-cloud-stage="1"] .cloud-node-label { border-color:var(--node-color); }
html[data-kiosk] .kiosk-site-qr { background:#242424ed; border-color:#ffffff30; }
html[data-kiosk] .kiosk-home { background:var(--han-pink); border-color:var(--han-pink); color:#fff; }
@media(max-width:900px) {
 html #chapter-start { margin-top:56px; margin-bottom:48px; }
 html[data-page="discover"] .discovery-hero { padding:0; }
 html[data-page="discover"] .hero-intro { min-height:0; }
 html[data-page="discover"] .hero-copy h2 { min-height:0; }
}

html #inspiration-dialog::backdrop, html #article-dialog::backdrop { background:#000d; }

/* A complete light palette, including the previously fixed dark visual panels. */
html[data-theme="light"] body > header { background:#fff; border-color:#e3e3e3; }
html[data-theme="light"] header .logo img.han-logo { filter:none; }
html[data-theme="light"] header .logo-name, html[data-theme="light"] header .nav-link,
html[data-theme="light"] header .theme-switch, html[data-theme="light"] header .mobile-menu-toggle { color:#151515; }
html[data-theme="light"] header .nav-link:hover, html[data-theme="light"] header .nav-link.active,
html[data-theme="light"] header .theme-switch:hover, html[data-theme="light"] header .mobile-menu-toggle:hover { background:#f8f8f8; color:#151515; }
html[data-theme="light"] header .theme-switch, html[data-theme="light"] header .mobile-menu-toggle { border-color:#d0d0d0; }
html[data-theme="light"] header .nav-link[data-page="contact"] { background:var(--han-pink); color:#fff; }
html[data-theme="light"] .lab-hero { background:#f8f8f8; color:#151515; }
html[data-theme="light"] .lab-hero::after { background:linear-gradient(90deg,#f8f8f8 8%,#f8f8f8d9 28%,#f8f8f800 48%); }
html[data-theme="light"] .lab-introduction h2 { color:#151515; }
html[data-theme="light"] .lab-introduction .lab-lead { color:#454545; }
html[data-theme="light"] .lab-introduction-actions .text-link { color:#151515; border-color:#757575; }
html[data-theme="light"] .hero-visual-caption button { color:#454545; }
html[data-theme="light"] .hero-visual-caption [data-scroll-cloud] { color:#151515; }
html[data-theme="light"] .data-art.knowledge-atlas { --ink:#151515; --muted:#595959; --line:#d8d8d8; --surface:#fff; --lime:#e50056; background:transparent; color:var(--ink); }
html[data-theme="light"] .cloud-interaction-hint { color:#151515; }
html[data-theme="light"] .knowledge-atlas .cloud-detail { border-top-color:#d8d8d8; }
html[data-theme="light"] .cloud-node-label { background:#fff; color:#151515; box-shadow:0 3px 14px #0000000a; }
html[data-theme="light"] .cloud-node-label small { color:#595959; }
html[data-theme="light"] .cloud-node-label:hover, html[data-theme="light"] .cloud-node-label[aria-pressed="true"] { background:#f1f1f1; color:#151515; }
html[data-theme="light"] .cloud-question, html[data-theme="light"] .cloud-question:hover { background:var(--han-pink); color:#fff; }
html[data-theme="light"] .catalog-stage:fullscreen .catalog-visual { background:#f8f8f8; }
@media(max-width:1100px) { html[data-theme="light"] header .nav-links { background:#fff; border-color:#ddd; } }
@media(max-width:800px) { html[data-theme="light"] .lab-hero::after { background:linear-gradient(90deg,#f8f8f8f5,#f8f8f8a6); } }

.lab-location { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px; margin:24px 0 32px; border:1px solid var(--line); border-left:4px solid var(--han-pink); background:var(--surface); }
.lab-location h3 { margin:0 0 10px; font-size:28px; }.lab-location p { margin:0; line-height:1.8; color:var(--muted); font-size:16px; }
.lab-location strong { color:var(--ink); }.contact-location { margin-top:0; padding:20px; }

/* Keep the four routes on the same visual field as the opening. */
.lab-hero-main { position:relative; }
html .lab-hero > .lab-entries { position:relative; z-index:1; padding:30px 0 42px; border-top:1px solid #ffffff25; }
.lab-hero::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(0deg,#101014f5 0%,#101014c9 16%,transparent 40%); }
html[data-theme="dark"] .lab-hero .lab-entry { border-color:#ffffff25; }
html[data-theme="light"] .lab-hero::before { background:linear-gradient(0deg,#f8f8f8f5 0%,#f8f8f8c9 16%,transparent 40%); }
html[data-theme="light"] .lab-hero > .lab-entries { border-top-color:#00000020; }
@media(max-width:480px) { html .lab-hero > .lab-entries { padding:24px 0; } }

/* At the start the hero extends behind the menu; scrolling restores its solid surface. */
html[data-page="discover"] main { padding-top:0; }
html[data-page="discover"] .lab-hero { padding-top:var(--header-height); }
html[data-page="discover"] body > header:not(.is-scrolled) {
 background:transparent; border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
}
html[data-page="discover"] body > header:not(.is-scrolled) .nav-links > .nav-link.active:not([data-page="contact"]) { background:transparent; }

/* A dedicated drag surface leaves links, text selection and native scrolling usable. */
.hero-cloud-control { position:absolute; top:0; bottom:140px; left:50%; right:0; z-index:1; cursor:default; touch-action:pan-y; }
.hero-cloud-control.is-over-globe { cursor:grab; }
.hero-cloud-control[hidden] { display:none; }
.hero-cloud-control:focus-visible { outline-offset:-8px; }
.hero-cloud-control.is-dragging, .atlas-graph.is-dragging { cursor:grabbing; user-select:none; }
.hero-visual-caption { z-index:2; }
.hero-cloud-actions { display:flex; gap:18px; }
.hero-drag-hint { font-size:12px; color:var(--muted); }
.atlas-graph { cursor:grab; touch-action:pan-y; }
@media(max-width:1100px) { .hero-cloud-control { left:62%; } }
@media(max-width:800px) { .hero-cloud-control, .hero-drag-hint { display:none; }.hero-cloud-actions { gap:0; } }

/* The graph fills the whole hero behind its copy, so dragging here must not select text. */
.lab-hero-main { user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.lab-hero-main.is-dragging, .lab-hero-main.is-dragging .hero-cloud-control { cursor:grabbing; }

/* HAN-pink accents in the illustrated AI examples. */
html .story-copy h2 em, html .inspiration-title em { color:var(--han-pink); }
html #possibility-stack .possibility-card:hover, html .inspiration-card:hover { border-color:var(--han-pink); }
html #possibility-stack .possibility-card:focus-visible, html .inspiration-card:focus-visible { outline-color:var(--han-pink); }
html .art-world { background:radial-gradient(ellipse at 70% 10%,#ef4987,#762746 38%,#21151c 80%); }
html .world-sun { background:#ffedf4; box-shadow:0 0 50px #e5005640; }
html .world-mountain { background:#4b2035; }html .world-mountain.back { background:#843653; }
html .art-robot { background:radial-gradient(ellipse,#873653,#291a21 65%); }
html .robot-figure i { background:linear-gradient(110deg,#f1d7e1,#be6b8b); border-color:#f1d7e177; }
html .art-edit { background:linear-gradient(120deg,#62555b,#35232c); }
/* Indicate keyboard focus at the instruction, rather than framing the whole scene. */
.hero-cloud-control:focus-visible, .atlas-graph:focus-visible { outline:none; }
.lab-hero-main:has(.hero-cloud-control:focus-visible) .hero-drag-hint,
.knowledge-atlas:has(.atlas-graph:focus-visible) .cloud-interaction-hint { outline:2px solid var(--han-pink); outline-offset:5px; }

.project-context a { color:inherit; text-decoration:underline; text-underline-offset:4px; }

/* Consistent icon alignment and a system-aware theme chooser. */
html header .mobile-menu-toggle { padding:0; align-items:center; justify-content:center; line-height:1; }
.mobile-menu-toggle .menu-icon { width:22px; height:22px; display:block; }
.mobile-menu-toggle .menu-close { display:none; }
.mobile-menu-toggle[aria-expanded="true"] .menu-bars { display:none; }
.mobile-menu-toggle[aria-expanded="true"] .menu-close { display:block; }
.theme-switch .system-icon { display:none; }
html[data-theme-preference="system"] .theme-switch svg { display:none; }
html[data-theme-preference="system"] .theme-switch .system-icon { display:block; }
html[data-theme-preference="light"] .theme-switch .moon-icon { display:none; }
html[data-theme-preference="light"] .theme-switch .sun-icon { display:block; }
html[data-theme-preference="dark"] .theme-switch .sun-icon { display:none; }
html[data-theme-preference="dark"] .theme-switch .moon-icon { display:block; }
.theme-menu { position:fixed; inset:auto; top:calc(var(--header-height) - 2px); right:max(var(--page-gutter),calc((100vw - var(--page-width))/2)); margin:0; padding:10px; min-width:190px; background:var(--paper); color:var(--ink); border:1px solid var(--line); box-shadow:0 10px 36px #0003; }
.theme-menu fieldset { border:0; margin:0; padding:0; }.theme-menu legend { font-size:13px; font-weight:600; padding:8px 10px; }
.theme-menu label { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; cursor:pointer; font-size:14px; }
.theme-menu label:hover { background:var(--surface); }.theme-menu input { accent-color:var(--han-pink); width:16px; height:16px; }
@media(max-width:1100px) { html header .mobile-menu-toggle { display:flex; } }

.dialog-origin { color:var(--muted); font-size:14px; line-height:1.7; padding-bottom:18px; border-bottom:1px solid var(--line); }

.knn-chapter { position:relative; height:190svh; }
html .knn-chapter #mini-lab { position:sticky; top:calc(var(--header-height) + 16px); min-height:calc(100svh - var(--header-height) - 32px); padding-block:36px; background:var(--paper); }
.knn-story-steps { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 8px; }
.knn-story-steps button { min-height:44px; padding:9px 12px; background:transparent; color:var(--ink); border:1px solid var(--line); font-size:12px; }
.knn-story-steps [aria-pressed="true"] { background:var(--han-pink); color:#fff; border-color:var(--han-pink); }
#knn-step-description { min-height:5.5em; }#knn-follow-scroll[hidden] { display:none; }
#mini-lab .experiment-heading { font-size:12px; letter-spacing:0; }
@media(max-width:900px), (max-height:800px), (prefers-reduced-motion:reduce) {
 .knn-chapter { height:auto; }
 html .knn-chapter #mini-lab { position:relative; top:auto; min-height:0; padding-block:48px; }
 #knn-step-description { min-height:0; }
}

/* Cards arrive in sequence and settle before visitors interact with them. */
html #possibility-stack .possibility-card { --card-delay:0; --card-reveal:clamp(0,calc(var(--chapter-enter,0)*1.7 - var(--card-delay)),1); cursor:pointer; }
html #possibility-stack .possibility-card:nth-child(2) { --card-delay:.24; }
html #possibility-stack .possibility-card:nth-child(3) { --card-delay:.48; }
html #possibility-stack .possibility-card.is-story-highlight { border-color:var(--han-pink); box-shadow:inset 0 0 0 1px var(--han-pink), 0 18px 44px #e5005638; }
html[data-theme="light"] #possibility-stack .possibility-card.is-story-highlight { background:var(--paper); }
html #possibility-stack .possibility-card .card-arrow { font-size:13px; font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-color:var(--han-pink); text-underline-offset:5px; }
html #possibility-stack .possibility-card:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
html .inspiration-story .story-hint { max-width:390px; font-size:13px; line-height:1.7; }
@media(prefers-reduced-motion:no-preference) {
 html #possibility-stack .possibility-card { transform:translateX(calc((1 - var(--card-reveal))*80px)) scale(calc(.96 + var(--card-reveal)*.04)); opacity:calc(.25 + var(--card-reveal)*.75); }
 html #possibility-stack .possibility-card:focus-within { transform:none; opacity:1; }
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference) {
 html #possibility-stack .possibility-card { transform:translateY(calc((1 - var(--card-reveal))*28px)); }
}

.inspiration-access-note { max-width:760px; color:var(--muted); font-size:13px; line-height:1.7; margin:18px 0; }

html #mini-lab .knn-play-instruction { font-size:16px; font-weight:600; color:var(--ink); margin:20px 0 8px; }
html #mini-lab .knn-preset-label { font-size:13px; color:var(--muted); margin:0; }
#mini-lab .experiment-presets { margin-top:10px; }
#knn-drag-prompt { color:var(--ink); font-weight:600; }
html #knn-canvas { cursor:grab; }html #knn-canvas.is-dragging { cursor:grabbing; }

.inspiration-nav { display:flex; flex-wrap:wrap; gap:24px; border-bottom:1px solid var(--line); margin:0 0 32px; }
.inspiration-nav a { display:flex; align-items:center; min-height:48px; padding:10px 0; font-size:14px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.inspiration-nav a[aria-current="page"] { border-bottom-color:var(--han-pink); color:var(--ink); font-weight:600; }
.inspiration-nav a:hover { color:var(--ink); }

.art-segment { background:radial-gradient(ellipse at 50% 45%,#73394e,#20191e 75%); }
.segment-object { width:105px; height:135px; border-radius:48% 48% 35% 42%; background:linear-gradient(125deg,#e9e5e7,#a6989e); transform:rotate(-12deg); }
.segment-mask { position:absolute; width:115px; height:143px; border-radius:48% 48% 35% 42%; border:2px solid #e50056; background:#e5005640; transform:rotate(-12deg); }
.segment-point { position:absolute; width:14px; height:14px; border:3px solid #e50056; border-radius:50%; background:#fff; top:43%; left:49%; }

/* About explains the lab; the contact page handles visits and practical arrangements. */
html[data-page="about"] main { margin:0; padding:var(--header-height) 0 0; height:auto !important; overflow:visible; }
html #page-about.active { display:block; min-height:0; }
.lab-about { width:min(var(--page-width),calc(100% - var(--page-gutter)*2)); margin:auto; padding:48px 0 72px; }
.lab-about-opening { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:64px; align-items:center; }
.lab-about h2 { font-size:clamp(44px,5vw,72px); line-height:1.05; margin:0 0 24px; }
.lab-about p { color:var(--muted); font-size:16px; line-height:1.8; margin:0 0 18px; }
.lab-about .lab-about-lead { color:var(--ink); font-size:22px; line-height:1.6; }
.lab-about-summary { padding:30px; background:var(--surface); border-left:4px solid var(--han-pink); }
.lab-about h3 { font-size:32px; line-height:1.2; margin:0 0 20px; }
.lab-about-summary h3 { font-size:29px; }
.lab-about-summary ul { padding-left:20px; color:var(--muted); font-size:15px; line-height:1.8; margin:0 0 16px; }
.lab-about-summary li { margin-bottom:10px; }
.lab-about-section { padding:44px 0; margin-top:36px; border-block:1px solid var(--line); }
.lab-about-audiences { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.lab-about h4 { font-size:25px; margin:8px 0 12px; }
.lab-about-audiences p { font-size:15px; margin:0; }
.lab-about-context { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; padding:44px 0; }
.lab-about-visit { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:26px 0 0; border-top:1px solid var(--line); }
.lab-about-visit p { margin:0; }.lab-about-visit strong { color:var(--ink); }
.lab-about-study { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:64px; padding:40px; margin-bottom:44px; background:var(--surface); border-left:4px solid var(--han-pink); }
.lab-about .lab-about-study-kicker { color:#bd0047; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin:0 0 12px; }
html[data-theme="dark"] .lab-about .lab-about-study-kicker { color:#ff7aa8; }
.lab-about-study-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:26px; }
.lab-about-study-facts { display:grid; gap:18px; margin:0; align-content:center; }
.lab-about-study-facts > div { padding-bottom:16px; border-bottom:1px solid var(--line); }.lab-about-study-facts > div:last-child { padding-bottom:0; border-bottom:0; }
.lab-about-study-facts dt { color:var(--ink); font-size:13px; font-weight:600; margin-bottom:4px; }.lab-about-study-facts dd { color:var(--muted); font-size:15px; line-height:1.6; margin:0; }
@media(max-width:900px) { .lab-about-opening { gap:32px; }.lab-about-audiences { gap:24px; }.lab-about-context { gap:32px; }.lab-about-study { gap:32px; } }
@media(max-width:700px) {
 .lab-about { padding-top:30px; }.lab-about-opening,.lab-about-audiences,.lab-about-context,.lab-about-study { grid-template-columns:1fr; gap:24px; }.lab-about-study { padding:24px; margin-bottom:30px; }
 .lab-about .lab-about-lead { font-size:20px; }.lab-about-summary { padding:24px; }
 .lab-about-section { margin-top:30px; padding-block:30px; }.lab-about-context { padding-block:30px; }
 .lab-about h3 { font-size:29px; }.lab-about-audiences h4 { margin-top:0; }
}

.radar-toolbar { flex-wrap:wrap; }.radar-source-choice { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }.radar-source-choice select { min-height:44px; max-width:200px; padding:8px 12px; border:1px solid var(--line); color:var(--ink); background:var(--paper); font:inherit; }

/* Readable small text on the light card surface; keep the accent in borders and controls. */
html .catalog-category { color:var(--ink); border-left:2px solid var(--han-pink); padding-left:8px; }
html .radar-read, html .inspiration-card-foot span:last-child { color:var(--ink); }
html .inspiration-card-foot { font-size:12px; line-height:1.6; }
html .contact-cta-hint { color:var(--muted); opacity:1; }
.inspiration-title, #lab-title, #discovery-title { overflow-wrap:anywhere; }
@media(max-width:480px) { html .inspiration-title { font-size:clamp(36px,10vw,48px); } }
@media(max-width:650px) { #project-search,#tool-search,.filter-dialog .catalog-filter-field select { font-size:16px; } }

/* Touchscreen targets and readable controls at the physical installation. */
html[data-kiosk] { --header-height:96px; }
html[data-kiosk] .catalog-control, html[data-kiosk] .catalog-categories button,
html[data-kiosk] .catalog-types button, html[data-kiosk] .filter-pill,
html[data-kiosk] .text-link, html[data-kiosk] .tool-link { min-height:56px; font-size:16px; }
html[data-kiosk] .catalog-filter-field select, html[data-kiosk] #project-search,
html[data-kiosk] #tool-search { min-height:56px; font-size:16px; }
html[data-kiosk] .close-button, html[data-kiosk] .dialog-dismiss,
html[data-kiosk] .filter-dialog-close { width:56px; height:56px; }
@media(max-width:650px) { html[data-kiosk] { --header-height:76px; } }

.hero-cloud-control, .atlas-graph, .lab-hero-main { touch-action:pan-y pinch-zoom; }

/* The first news card uses the same readable source label as every other card. */
html .radar-card .radar-source, html .radar-card:first-child .radar-source { color:var(--muted); font-size:11px; }

/* OpenRouter guide: a readable, numbered walkthrough that links out to each service. */
.guide { width:min(860px,calc(100% - var(--page-gutter)*2)); margin:auto; padding:48px 0 80px; }
.guide-back { display:inline-block; margin-bottom:28px; }
.guide .guide-kicker { color:#bd0047; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin:0 0 12px; }
html[data-theme="dark"] .guide .guide-kicker { color:#ff7aa8; }
.guide h2 { font-size:clamp(38px,4.4vw,60px); line-height:1.08; margin:0 0 22px; }
.guide p, .guide li, .guide dd { color:var(--muted); font-size:16px; line-height:1.8; }
.guide p { margin:0 0 14px; }
.guide .guide-lead { color:var(--ink); font-size:20px; line-height:1.65; }
.guide strong, .guide em { color:var(--ink); }
.guide-needs { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:26px 0 8px; }
.guide-needs li { padding:8px 14px; border:1px solid var(--line); font-size:14px; line-height:1.5; }
.guide-part { font-size:28px; line-height:1.2; margin:56px 0 8px; padding-top:28px; border-top:1px solid var(--line); }
.guide-steps { list-style:none; counter-reset:step var(--start,0); padding:0; margin:0; }
.guide-steps[start="4"] { --start:3; }
.guide-steps > li { counter-increment:step; position:relative; padding:26px 0 10px 64px; border-bottom:1px solid var(--line); }
.guide-steps > li:last-child { border-bottom:0; }
.guide-steps > li::before { content:counter(step); position:absolute; left:0; top:24px; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--han-pink); color:#fff; font-weight:600; font-size:17px; }
.guide-steps h4 { color:var(--ink); font-size:22px; line-height:1.3; margin:6px 0 10px; }
.guide p > a:not([class]), .guide dd > a:not([class]) { color:var(--ink); text-decoration:underline; text-decoration-color:var(--han-pink); text-underline-offset:3px; }
.guide-note { padding:14px 18px; background:var(--surface); border-left:3px solid var(--han-pink); font-size:15px; }
.guide-note--strong { background:#e500561a; border-left-width:4px; color:var(--ink); font-size:16px; }
.guide-note--strong strong { color:#bd0047; }
html[data-theme="dark"] .guide-note--strong strong { color:#ff7aa8; }
.guide-step-alert::before { background:var(--ink) !important; color:var(--paper) !important; }
.guide-links { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:18px; }
.guide kbd { display:inline-block; padding:1px 7px; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; background:var(--surface); color:var(--ink); font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.guide-aside { margin-top:56px; padding:32px; background:var(--surface); border-left:4px solid var(--han-pink); }
.guide-aside h3 { font-size:26px; margin:0 0 18px; }
.guide-aside dl { display:grid; gap:16px; margin:0; }
.guide-aside dt { color:var(--ink); font-size:14px; font-weight:600; margin-bottom:2px; }
.guide-aside dd { margin:0; font-size:15px; }
.guide-uses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:22px; }
.guide-uses > section { display:flex; flex-direction:column; padding:24px; border:1px solid var(--line); background:var(--paper); }
.guide-uses h4 { color:var(--ink); font-size:21px; line-height:1.3; margin:0 0 10px; }
.guide-uses p { font-size:15px; }
.guide-uses .text-link { margin-top:auto; align-self:flex-start; }
.guide-steps[start="6"] { --start:5; }
.guide-os { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:6px 0 16px; }
.guide-os > section { display:flex; flex-direction:column; padding:20px; border:1px solid var(--line); background:var(--paper); }
.guide-os h5 { color:var(--ink); font-size:15px; font-weight:600; letter-spacing:.02em; margin:0 0 8px; }
.guide-os p { font-size:15px; }
.guide-os .text-link { margin-top:auto; align-self:flex-start; }
.guide code { padding:1px 6px; background:var(--surface); border:1px solid var(--line); color:var(--ink); font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.guide-keys { list-style:none; padding:0; margin:0 0 16px; display:grid; gap:8px; }
.guide-keys li { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; font-size:15px; }
.guide-keys li > span:first-child { min-width:80px; color:var(--ink); font-weight:600; }
.guide-substeps { margin:4px 0 16px; padding-left:22px; }
.guide-substeps li { margin-bottom:8px; }
.guide-glossary { margin-top:56px; padding-top:28px; border-top:1px solid var(--line); }
.guide-glossary h3 { font-size:26px; margin:0 0 6px; }
.guide-glossary-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; margin:18px 0 0; }
.guide-glossary-list > div { padding:12px 0; border-top:1px solid var(--line); }
.guide-glossary-list dt { color:var(--ink); font-size:15px; font-weight:600; margin-bottom:3px; }
.guide-glossary-list dd { margin:0; font-size:14px; line-height:1.65; }
@media(max-width:700px) { .guide-glossary-list { grid-template-columns:1fr; } }
.guide-sources { margin-top:56px; padding-top:28px; border-top:1px solid var(--line); }
.guide-sources h3 { font-size:26px; margin:0 0 18px; }
.guide-sources-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.guide-sources h4 { color:var(--ink); font-size:17px; margin:0 0 8px; }
.guide-sources ul { list-style:none; padding:0; margin:0; }
.guide-sources li { margin:0; }
.guide .guide-checked { margin-top:22px; font-size:13px; }
.guide-table-wrap { overflow-x:auto; margin:18px 0 8px; border:1px solid var(--line); }
.guide-table { width:100%; border-collapse:collapse; font-size:15px; }
.guide-table th, .guide-table td { padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); line-height:1.6; }
.guide-table tr:last-child > * { border-bottom:0; }
.guide-table thead th { background:var(--surface); color:var(--ink); font-size:13px; font-weight:600; }
.guide-table tbody th { color:var(--ink); font-weight:600; white-space:nowrap; }
.guide-table td { color:var(--muted); }
@media(max-width:700px) { .guide-os, .guide-sources-grid { grid-template-columns:1fr; } }
@media(max-width:600px) { .guide-uses { grid-template-columns:1fr; }.guide { padding-top:30px; }.guide .guide-lead { font-size:18px; }.guide-steps > li { padding-left:52px; }.guide-steps > li::before { width:34px; height:34px; font-size:15px; }.guide-aside { padding:22px; } }

/* A quiet link to the Datalab code, for those who look for it. */
.lab-footer-links { display:flex; align-items:center; gap:18px; }
.lab-footer .lab-footer-gh { justify-content:center; min-width:44px; min-height:44px; color:var(--muted); opacity:.55; transition:opacity .2s, color .2s; }
.lab-footer .lab-footer-gh:hover, .lab-footer .lab-footer-gh:focus-visible { color:var(--han-pink); opacity:1; }
.lab-about .lab-about-hub { margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:14px; line-height:1.7; }
.lab-about .lab-about-hub .text-link { display:inline-flex; min-height:0; margin-left:4px; white-space:nowrap; }
.nowrap { white-space:nowrap; }