@import url("tokens.css");

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--ds-surface-page); color: var(--ds-text-strong); font-family: var(--font-body); font-size: var(--type-body); line-height: var(--line-body); }
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
.skip-link { position: fixed; z-index: 200; inset: 10px auto auto 10px; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--color-text); color: var(--color-bg); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 4px; }

/* Design-system primitives (opt-in for the phase 3 templates). */
.type-display { font-family: var(--font-display); font-size: var(--type-display); font-weight: var(--font-weight-black); line-height: var(--line-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.type-h1 { font-family: var(--font-display); font-size: var(--type-h1); font-weight: var(--font-weight-black); line-height: var(--line-heading); letter-spacing: var(--tracking-display); text-wrap: balance; }
.type-h2 { font-family: var(--font-display); font-size: var(--type-h2); font-weight: var(--font-weight-black); line-height: var(--line-heading); letter-spacing: var(--tracking-display); text-wrap: balance; }
.type-h3 { font-family: var(--font-display); font-size: var(--type-h3); font-weight: var(--font-weight-black); line-height: 1.24; }
.type-body-lg { font-size: var(--type-body-lg); line-height: var(--line-body); }
.type-small { font-size: var(--type-small); line-height: var(--line-small); }
.type-label { font-size: var(--type-label); font-weight: var(--font-weight-bold); line-height: var(--line-small); letter-spacing: var(--tracking-label); }
.shape-organic-a { border-radius: var(--radius-organic-a); }
.shape-organic-b { border-radius: var(--radius-organic-b); }
.shape-paper { border-radius: var(--radius-paper); }
.shape-sticker { border-radius: var(--radius-pill); }
.media-frame { position: relative; overflow: hidden; aspect-ratio: var(--media-ratio-landscape); border-radius: var(--radius-organic-card); background: color-mix(in srgb, var(--ds-color-accent-sky) 24%, var(--ds-surface-section)); }
.media-frame.wide { aspect-ratio: var(--media-ratio-wide); }
.media-frame.square { aspect-ratio: var(--media-ratio-square); }
.media-frame.portrait { aspect-ratio: var(--media-ratio-portrait); }
.media-frame > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Floating navigation */
.site-header { position: absolute; z-index: 80; inset: 0 0 auto; padding: 18px clamp(12px, 3vw, 42px); transition: padding .25s ease; }
.site-header.scrolled { position: fixed; padding-block: 10px; }
.nav-shell { max-width: var(--container-width); min-height: 68px; margin: auto; padding: 10px 14px 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--color-bg) 84%, transparent); box-shadow: 0 10px 35px color-mix(in srgb, var(--color-text) 8%, transparent); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 1.12rem; font-weight: 900; }
.brand-copy small { color: var(--color-muted); font-size: .62rem; }
.brand-mark { position: relative; display: inline-block; flex: 0 0 auto; width: 42px; height: 42px; overflow: hidden; border-radius: 15px 13px 17px 11px; background: var(--color-primary); transform: rotate(5deg); }
.brand-mark::before, .brand-mark::after, .brand-mark i, .brand-mark b { content: ""; position: absolute; border-radius: 50%; }
.brand-mark::before { width: 18px; height: 18px; inset: 6px auto auto 5px; background: var(--color-lime); }
.brand-mark::after { width: 10px; height: 10px; inset: auto 7px 7px auto; background: var(--color-cyan); }
.brand-mark i { width: 5px; height: 5px; inset: 9px 9px auto auto; background: var(--color-text); }
.brand-mark b { width: 14px; height: 5px; inset: auto auto 8px 7px; border: 2px solid var(--color-text); border-top: 0; border-radius: 0 0 14px 14px; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.6vw, 24px); color: var(--color-muted); font-size: .78rem; font-weight: 700; }
.desktop-nav > a span { position: relative; }
.desktop-nav > a span::after { content: ""; position: absolute; inset: auto 0 -7px; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.desktop-nav > a:hover { color: var(--color-text); }
.desktop-nav > a:hover span::after { transform: scaleX(1); }
.more-menu { position: relative; }
.more-menu summary { cursor: pointer; list-style: none; white-space: nowrap; }
.more-menu summary::-webkit-details-marker { display: none; }
.more-menu div { position: absolute; top: 34px; left: 0; min-width: 220px; display: grid; gap: 3px; padding: 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.more-menu div a { padding: 10px 12px; border-radius: var(--radius-sm); }
.more-menu div a:hover { background: var(--color-bg-alt); color: var(--color-text); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.search-button, .menu-button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--color-text); color: var(--color-bg); cursor: pointer; }
.search-button span { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.search-button span::after { content: ""; position: absolute; width: 6px; height: 2px; inset: 11px auto auto -4px; background: currentColor; transform: rotate(45deg); }
.search-button em { font-style: normal; font-size: .74rem; font-weight: 800; }
.menu-button { display: none; }
.menu-button i { width: 15px; height: 9px; border-block: 2px solid currentColor; }
.mobile-overlay { position: fixed; z-index: 98; inset: 0; background: color-mix(in srgb, var(--color-text) 48%, transparent); backdrop-filter: blur(4px); }
.mobile-drawer { position: fixed; z-index: 99; inset: 0 0 0 auto; width: min(90vw, 430px); padding: 24px; background: var(--color-bg); border-left: 1px solid var(--color-border); transform: translateX(105%); transition: transform .3s ease; }
.mobile-drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.drawer-head button { width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text); font-size: 1.7rem; cursor: pointer; }
.mobile-drawer nav { display: grid; padding-block: 18px; }
.mobile-drawer nav a { padding: 12px 4px; border-bottom: 1px solid var(--color-border); font-size: 1.02rem; font-weight: 750; }
.drawer-search { margin-top: 18px; }
.drawer-search label { display: block; margin-bottom: 9px; color: var(--color-muted); font-size: .82rem; }
.drawer-search div { display: flex; }
.drawer-search input { min-width: 0; flex: 1; padding: 12px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.drawer-search button { padding: 10px 15px; color: var(--color-bg); background: var(--color-text); border: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

/* Hero */
.playful-hero { position: relative; min-height: min(930px, 100svh); overflow: hidden; padding: 150px clamp(20px, 4vw, 60px) 82px; background: var(--color-bg-alt); }
.playful-hero::after { content: ""; position: absolute; z-index: 1; inset: auto -5% -70px; height: 130px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--color-bg); }
.hero-layout { position: relative; z-index: 2; max-width: var(--container-width); min-height: 660px; margin: auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(430px, .78fr); align-items: center; gap: clamp(40px, 7vw, 110px); }
.hero-copy h1 { max-width: 760px; margin: 25px 0 22px; font-size: clamp(4.2rem, 7.2vw, 7.6rem); line-height: .92; letter-spacing: -.065em; text-wrap: balance; }
.hero-copy > p { max-width: 650px; margin: 0; color: var(--color-muted); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.95; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 999px; color: var(--color-muted); font-size: .72rem; font-weight: 800; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.eyebrow-bright { background: var(--color-lime); color: var(--color-text); border-color: transparent; transform: rotate(-2deg); }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.pill-button { min-height: var(--control-height-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--control-padding-md); border: 1px solid transparent; border-radius: var(--radius-pill); font-size: var(--type-label); font-weight: var(--font-weight-black); line-height: 1; letter-spacing: var(--tracking-label); cursor: pointer; transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-base) var(--ease-playful), box-shadow var(--motion-base) var(--ease-standard); }
.pill-button:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.pill-button:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-pressed); }
.pill-button:focus-visible { outline-color: var(--ds-color-secondary); }
.pill-button.primary { background: var(--ds-action); color: var(--ds-on-action); }
.pill-button.primary:hover { background: var(--ds-action-hover); color: var(--ds-on-action-hover); }
.pill-button.secondary { border-color: var(--ds-border); background: color-mix(in srgb, var(--ds-surface-card) 72%, transparent); color: var(--ds-text-strong); }
.pill-button.secondary:hover { border-color: color-mix(in srgb, var(--ds-color-secondary) 52%, var(--ds-border)); background: var(--ds-surface-card); }
.pill-button.ghost { border-color: transparent; background: transparent; color: var(--ds-text-strong); box-shadow: none; }
.pill-button.ghost:hover { background: color-mix(in srgb, var(--ds-color-secondary) 10%, transparent); }
.pill-button.small { min-height: var(--control-height-sm); padding: var(--control-padding-sm); font-size: .7rem; }
.pill-button.large { min-height: var(--control-height-lg); padding: var(--control-padding-lg); font-size: .82rem; }
.pill-button[aria-disabled="true"], .pill-button:disabled { opacity: .5; pointer-events: none; }
.arrow-link span { display: inline-block; transition: transform .25s ease; }
.arrow-link:hover span { transform: translateX(-5px); }
.hero-note { max-width: 470px; margin-top: 36px; display: flex; align-items: center; gap: 13px; color: var(--color-muted); }
.hero-note > span { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--color-cyan); color: var(--color-text); }
.hero-note p, .hero-note strong { margin: 0; display: block; }
.hero-note p { font-size: .78rem; line-height: 1.65; }
.hero-note strong { color: var(--color-text); font-size: .84rem; }
.hero-collage { position: relative; min-height: 570px; }
.collage-main { position: absolute; inset: 48px 4% 30px 8%; overflow: hidden; border-radius: 48% 52% 44% 56% / 38% 43% 57% 62%; background: var(--color-primary); box-shadow: var(--shadow-soft); transform: rotate(2deg); }
.collage-main::before { content: ""; position: absolute; width: 58%; aspect-ratio: 1; inset: auto auto -20% -10%; border-radius: 50%; background: var(--color-lime); }
.collage-main::after { content: ""; position: absolute; width: 44%; aspect-ratio: 1; inset: 7% -12% auto auto; border-radius: 46% 54% 62% 38%; background: var(--color-cyan); }
.collage-orbit { position: absolute; z-index: 2; width: 72%; aspect-ratio: 1; inset: 13% 15%; border: 2px dashed color-mix(in srgb, var(--color-text) 30%, transparent); border-radius: 50%; }
.collage-orbit::before, .collage-orbit::after { content: ""; position: absolute; border-radius: 50%; background: var(--color-text); }
.collage-orbit::before { width: 18px; height: 18px; top: 5%; left: 20%; }
.collage-orbit::after { width: 9px; height: 9px; bottom: 12%; right: 3%; }
.collage-word { position: absolute; z-index: 3; inset: 43% auto auto 50%; width: 66%; text-align: center; transform: translate(-50%, -50%) rotate(-2deg); }
.collage-word small, .collage-word strong { display: block; }
.collage-word small { font-size: 1.05rem; font-weight: 800; }
.collage-word strong { margin-top: 5px; font-size: clamp(2.8rem, 5vw, 5rem); line-height: .95; }
.collage-pencil { position: absolute; z-index: 3; width: 48%; height: 24px; inset: auto 6% 18% auto; border-radius: 999px; background: var(--color-secondary); transform: rotate(-21deg); }
.collage-pencil::after { content: ""; position: absolute; left: -24px; border-block: 12px solid transparent; border-right: 28px solid var(--color-text); }
.collage-card { position: absolute; z-index: 4; padding: 15px 18px; border: 2px solid var(--color-text); border-radius: 18px; box-shadow: 6px 7px 0 var(--color-text); }
.collage-card span, .collage-card strong { display: block; }
.collage-card span { font-size: .64rem; opacity: .72; }
.collage-card strong { margin-top: 4px; font-size: .9rem; }
.collage-card-art { inset: 4% auto auto -2%; background: var(--color-pink); transform: rotate(-8deg); }
.collage-card-science { inset: auto -1% 11% auto; background: var(--color-cyan); transform: rotate(7deg); }
.collage-sticker { position: absolute; z-index: 5; width: 140px; height: 140px; inset: auto auto -1% 6%; display: grid; place-items: center; align-content: center; text-align: center; border-radius: 50%; background: var(--color-text); color: var(--color-bg); transform: rotate(-8deg); }
.collage-sticker span, .collage-sticker b { display: block; font-size: .68rem; }
.collage-sticker b { max-width: 90px; margin-top: 4px; font-size: .8rem; }
.collage-spark { position: absolute; z-index: 5; color: var(--color-secondary); font-size: 3rem; }
.spark-one { inset: 11% -2% auto auto; }.spark-two { inset: auto auto 14% -2%; color: var(--color-primary); }
.hero-scribble { position: absolute; border: 2px solid color-mix(in srgb, var(--color-secondary) 35%, transparent); border-radius: 50%; }
.hero-scribble-one { width: 200px; height: 100px; inset: 23% auto auto -90px; transform: rotate(22deg); }
.hero-scribble-two { width: 160px; height: 160px; inset: auto -70px 7% auto; }
.scroll-cue { position: absolute; z-index: 4; inset: auto 50% 27px auto; display: flex; gap: 10px; color: var(--color-muted); font-size: .7rem; transform: translateX(50%); }

/* Shared sections */
.section-wrap { position: relative; overflow: hidden; }
.site-section { max-width: var(--container-width); margin: auto; padding: var(--section-space) var(--page-gutter); }
.section-heading { display: grid; grid-template-columns: minmax(330px, 1fr) minmax(260px, .58fr) auto; align-items: end; gap: 28px; margin-bottom: 42px; }
.section-heading h2 { max-width: 780px; margin: 15px 0 0; font-family: var(--font-display); font-size: var(--type-h2); font-weight: var(--font-weight-black); line-height: var(--line-heading); letter-spacing: var(--tracking-display); text-wrap: balance; }
.section-heading > p { margin: 0; color: var(--color-muted); line-height: 1.85; }
.section-link { position: relative; padding-bottom: 5px; color: var(--color-text); font-size: .82rem; font-weight: 850; white-space: nowrap; }
.section-link::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: currentColor; transform-origin: right; transition: transform .25s ease; }
.section-link:hover::after { transform: scaleX(.55); }

/* Category mosaic */
.categories-stage { background: var(--color-bg); }
.categories-stage::before { content: ""; position: absolute; width: 240px; height: 240px; inset: 9% -120px auto auto; border-radius: 50%; background: var(--color-lime); opacity: .48; }
.category-mosaic { display: grid; grid-template-columns: 1.1fr .8fr 1fr; grid-auto-rows: 230px; gap: 18px; }
.category-tile { --category-tint: color-mix(in srgb, var(--category-accent) 28%, var(--color-surface)); position: relative; overflow: hidden; min-height: 230px; border: 1px solid color-mix(in srgb, var(--category-accent) 52%, var(--ds-border)); border-radius: var(--card-radius); background: var(--category-tint); transition: transform var(--motion-base) var(--ease-playful), box-shadow var(--motion-base) var(--ease-standard); }
.category-tile:hover { transform: translateY(-7px) rotate(-.6deg); box-shadow: var(--shadow-hover); }
.category-tile::after { content: ""; position: absolute; width: 150px; height: 150px; inset: auto -55px -58px auto; border: 28px solid color-mix(in srgb, var(--category-accent) 50%, transparent); border-radius: 50%; }
.category-tile a { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: var(--card-padding); }
.category-large { grid-row: span 2; background: var(--category-accent); color: var(--color-text); }
.category-wide { grid-column: span 2; }
.category-tall { grid-row: span 2; }
.category-round { border-radius: 110px 32px 32px 110px; }
.category-note { transform: rotate(1.3deg); }
.category-note:hover { transform: translateY(-7px) rotate(0); }
.tile-index { font-size: .67rem; opacity: .58; }
.tile-icon { position: absolute; left: 24px; top: 19px; font-size: 1.65rem; transition: transform .3s ease; }
.category-tile:hover .tile-icon { transform: rotate(12deg) scale(1.08); }
.tile-copy { margin: auto 0 0; }
.category-tile h3 { max-width: 340px; margin: 0 0 8px; font-size: clamp(1.45rem, 2.2vw, 2.35rem); line-height: 1.15; }
.category-tile p { max-width: 440px; margin: 0; color: color-mix(in srgb, currentColor 72%, transparent); line-height: 1.65; }
.tile-action { margin-top: 18px; font-size: .76rem; font-weight: 850; }
.tile-action i { display: inline-block; font-style: normal; transition: transform .25s ease; }
.category-tile:hover .tile-action i { transform: translateX(-5px); }

/* Article card system */
.featured-stage { background: var(--color-pink); }
.featured-stage::before { content: ""; position: absolute; width: 180px; height: 180px; inset: auto auto 5% -80px; border: 28px solid color-mix(in srgb, var(--color-bg) 38%, transparent); border-radius: 50%; }
.featured-editorial { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(2, 275px); gap: 18px; }
.article-card { position: relative; overflow: hidden; min-height: 320px; border: 1px solid color-mix(in srgb, var(--card-accent) 42%, var(--ds-border)); border-radius: var(--card-radius); background: var(--ds-surface-card); transition: transform var(--motion-base) var(--ease-playful), box-shadow var(--motion-base) var(--ease-standard); }
.article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.article-card .card-link { height: 100%; display: grid; }
.card-visual { position: relative; min-height: 185px; overflow: hidden; background: color-mix(in srgb, var(--card-accent) 32%, var(--color-bg-alt)); }
.card-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--motion-slow) var(--ease-playful); }
.article-card:hover .card-visual img { transform: scale(1.04); }
.image-placeholder { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 62%, var(--color-bg)), color-mix(in srgb, var(--color-cyan) 42%, var(--color-bg))); }
.image-placeholder::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; inset: -28% auto auto -14%; border: 24px solid color-mix(in srgb, var(--color-surface) 55%, transparent); border-radius: 50%; }
.image-placeholder i { position: absolute; width: 38%; aspect-ratio: 1; inset: auto -7% -20% auto; border-radius: 38% 62% 50% 50%; background: var(--color-lime); transform: rotate(19deg); }
.image-placeholder b { position: absolute; width: 12%; aspect-ratio: 1; inset: 14% 12% auto auto; border-radius: 50%; background: var(--color-secondary); }
.image-placeholder em { position: absolute; z-index: 2; inset: 50% auto auto 50%; color: var(--color-text); font-size: clamp(4rem, 8vw, 7rem); font-style: normal; font-weight: 900; transform: translate(-50%, -50%) rotate(-7deg); }
.image-placeholder small { position: absolute; z-index: 2; inset: auto auto 15px 18px; padding: 6px 9px; border-radius: 999px; background: var(--color-surface); font-size: .62rem; font-weight: 800; }
.card-content { position: relative; padding: var(--card-padding); }
.card-category { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--card-accent) 23%, var(--color-bg)); color: var(--color-text); font-size: .66rem; font-weight: 850; }
.card-content h3 { margin: 12px 0 9px; font-family: var(--font-display); font-size: var(--type-h3); font-weight: var(--font-weight-black); line-height: 1.24; }
.card-content p { margin: 0; padding-inline-end: 30px; color: var(--color-muted); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-arrow { position: absolute; left: 24px; bottom: 22px; font-size: 1.2rem; transition: transform .25s ease; }
.article-card:hover .card-arrow { transform: translateX(-6px); }
.editorial-large { grid-row: 1 / 3; }
.editorial-large .card-link { grid-template-rows: 1.2fr auto; }
.editorial-large .card-content { padding: 30px; }
.editorial-large .card-content h3 { max-width: 680px; font-size: clamp(2rem, 3.6vw, 3.8rem); }
.editorial-side { min-height: 0; }
.editorial-side .card-link { grid-template-columns: .8fr 1.2fr; }
.editorial-side .card-visual { min-height: 0; }
.editorial-side .card-content h3 { font-size: clamp(1.2rem, 1.7vw, 1.65rem); }
.editorial-side .card-content p { display: none; }

/* Different section worlds */
.topic-stage { background: var(--color-bg); }
.topic-stage .site-section { position: relative; }
.topic-grid { display: grid; grid-template-columns: 1.1fr .85fr .85fr; grid-auto-rows: 390px; gap: 18px; }
.topic-grid .card-link, .latest-grid .card-link, .related-grid .card-link, .articles-grid .card-link { grid-template-rows: 1fr auto; }
.topic-grid .horizontal .card-link { grid-template-rows: .85fr 1fr; }
.text-dominant .card-link { grid-template-rows: .55fr 1.2fr; }
.text-dominant .card-visual { min-height: 110px; }
.image-dominant .card-link { grid-template-rows: 1.45fr .8fr; }
.dark-stage { background: var(--color-text); color: var(--color-bg); }
.dark-stage::before { content: ""; position: absolute; width: 500px; height: 500px; inset: -160px auto auto -160px; border: 1px solid color-mix(in srgb, var(--color-cyan) 36%, transparent); border-radius: 50%; }
.dark-stage .eyebrow, .dark-stage .section-heading > p { color: color-mix(in srgb, var(--color-bg) 72%, transparent); }
.dark-stage .section-link { color: var(--color-lime); }
.dark-stage .article-card { border-color: color-mix(in srgb, var(--color-bg) 15%, transparent); background: color-mix(in srgb, var(--color-text) 91%, var(--color-secondary)); color: var(--color-bg); }
.dark-stage .card-content p { color: color-mix(in srgb, var(--color-bg) 68%, transparent); }
.calm-stage { background: color-mix(in srgb, var(--color-cyan) 22%, var(--color-bg)); }
.calm-stage .topic-grid { grid-template-columns: 1.35fr .825fr .825fr; }
.calm-stage .article-card:first-child .card-link { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.world-stage { background: var(--color-secondary); color: var(--color-bg); }
.world-stage::after { content: ""; position: absolute; width: 65vw; height: 65vw; inset: 18% -34vw auto auto; border: 2px dashed color-mix(in srgb, var(--color-bg) 35%, transparent); border-radius: 50%; }
.world-stage .section-heading > p, .world-stage .eyebrow { color: color-mix(in srgb, var(--color-bg) 76%, transparent); }
.world-stage .section-link { color: var(--color-bg); }
.paper-stage { background: color-mix(in srgb, var(--color-lime) 28%, var(--color-bg)); }
.paper-stage .article-card { border-radius: 8px 30px 8px 30px; transform: rotate(-1deg); box-shadow: 7px 8px 0 color-mix(in srgb, var(--color-text) 10%, transparent); }
.paper-stage .article-card:nth-child(2n) { transform: rotate(1.4deg); }
.paper-stage .article-card:hover { transform: translateY(-6px) rotate(0); }
.latest-stage { background: var(--color-bg); }
.latest-grid, .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.latest-grid .article-card, .related-grid .article-card { min-height: 390px; }

/* Future CTA */
.future-stage { background: var(--color-bg); }
.future-card { position: relative; min-height: 480px; overflow: hidden; display: grid; grid-template-columns: 1.05fr .65fr; align-items: center; gap: 40px; padding: clamp(35px, 7vw, 90px); border-radius: var(--radius-xl); background: var(--ds-color-accent-sun); color: var(--ds-text-strong); }
.future-copy { position: relative; z-index: 2; }
.future-copy h2 { max-width: 780px; margin: 18px 0; font-size: clamp(3rem, 5.5vw, 5.8rem); line-height: .98; letter-spacing: -.05em; }
.future-copy p { max-width: 650px; line-height: 1.8; }
.future-copy .pill-button { margin-top: 14px; background: var(--color-text); color: var(--color-bg); }
.future-visual { position: relative; min-height: 290px; }
.future-envelope { position: absolute; width: min(100%, 380px); aspect-ratio: 1.35; inset: 50% auto auto 50%; border: 3px solid var(--color-text); border-radius: 18px; background: var(--color-pink); box-shadow: 12px 14px 0 var(--color-text); transform: translate(-50%, -50%) rotate(7deg); }
.future-envelope::before, .future-envelope::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 50% 58%, 100% 0); background: var(--color-cyan); }
.future-envelope::after { clip-path: polygon(0 100%, 50% 45%, 100% 100%); background: var(--color-primary); }
.future-visual i, .future-visual b { position: absolute; z-index: 2; font-style: normal; }
.future-visual i { inset: 7% auto auto 4%; padding: 10px 16px; border: 2px solid var(--color-text); border-radius: 999px; background: var(--color-bg); font-weight: 900; transform: rotate(-8deg); }
.future-visual b { inset: auto 3% 3% auto; font-size: 4rem; color: var(--color-secondary); }

/* Listing and search */
.page-hero, .search-hero { position: relative; overflow: hidden; min-height: 610px; padding: 175px max(22px, calc((100vw - 1300px) / 2)) 75px; background: var(--color-bg-alt); }
.page-hero::after, .search-hero::after { content: ""; position: absolute; width: 420px; height: 420px; inset: auto -100px -150px auto; border: 70px solid var(--color-cyan); border-radius: 50%; opacity: .55; }
.page-hero > *, .search-hero > * { position: relative; z-index: 2; }
.page-hero h1, .search-hero h1 { max-width: 1000px; margin: 22px 0; font-size: clamp(4rem, 8vw, 8rem); line-height: .92; letter-spacing: -.065em; }
.page-hero h1 em { color: var(--color-primary); font-style: normal; }
.page-hero p { max-width: 680px; color: var(--color-muted); font-size: 1.1rem; line-height: 1.85; }
.listing-section { padding-top: 55px; }
.filter-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; padding: 14px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); }
.filter-strip label { padding-inline-start: 10px; color: var(--color-muted); }
.filter-strip select { min-width: 240px; padding: 12px 14px; color: var(--color-text); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 999px; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.articles-grid .article-card { min-height: 440px; }
.articles-grid .article-card:nth-child(5n + 1) { grid-column: span 2; }
.articles-grid .article-card:nth-child(5n + 1) .card-link { grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.pagination a, .pagination span { min-width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); }
.pagination a[aria-current="page"] { color: var(--color-bg); background: var(--color-text); border-color: var(--color-text); }
.search-hero { text-align: center; background: var(--color-cyan); }
.search-hero h1 { margin-inline: auto; }
.search-form { max-width: 940px; margin: 38px auto 0; display: grid; grid-template-columns: 1fr 220px auto; padding: 9px; border: 2px solid var(--color-text); border-radius: 999px; background: var(--color-surface); box-shadow: 9px 10px 0 var(--color-text); }
.search-form input, .search-form select { min-width: 0; padding: 15px 18px; border: 0; background: transparent; color: var(--color-text); }
.search-form select { border-inline-start: 1px solid var(--color-border); }
.search-form button { padding: 14px 25px; border: 0; border-radius: 999px; background: var(--color-primary); color: var(--color-bg); font-weight: 850; }
.results-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 30px; }
.results-heading p, .results-heading h2 { margin: 0; }
.results-heading h2 { font-size: 2.5rem; }
.results-heading span { margin-inline-start: auto; color: var(--color-muted); }
.empty-lab { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 30px; text-align: center; border: 2px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.empty-lab span { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--color-lime); color: var(--color-text); font-size: 2.3rem; }
.empty-lab h2, .empty-lab h3, .empty-lab p { margin: 4px; }.empty-lab p { color: var(--color-muted); }

/* Article reading experience */
.preview-banner { position: relative; z-index: 70; padding: 12px 20px; text-align: center; background: var(--color-pink); color: var(--color-text); font-weight: 850; }
.article-page { overflow: hidden; }
.article-hero { position: relative; min-height: 710px; padding: 180px max(22px, calc((100vw - 1250px) / 2)) 85px; display: flex; flex-direction: column; justify-content: end; background: var(--color-bg-alt); }
.article-hero::after { content: ""; position: absolute; width: 430px; height: 430px; inset: 12% -110px auto auto; border-radius: 44% 56% 62% 38%; background: var(--color-pink); opacity: .65; transform: rotate(17deg); }
.article-hero > * { position: relative; z-index: 2; }
.article-hero h1 { max-width: 1080px; margin: 22px 0; font-size: clamp(3.8rem, 7vw, 7.4rem); line-height: .96; letter-spacing: -.058em; text-wrap: balance; }
.article-summary { max-width: 810px; margin: 0; color: var(--color-muted); font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.9; }
.article-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; color: var(--color-muted); font-size: .82rem; }
.article-image { max-width: 1320px; margin: -30px auto 75px; padding-inline: 28px; position: relative; z-index: 3; }
.article-image img { width: 100%; max-height: 720px; object-fit: cover; border-radius: 72px 24px 72px 24px; box-shadow: var(--shadow-soft); }
.article-image figcaption { padding: 11px 8px; color: var(--color-muted); font-size: .78rem; }
.article-layout { max-width: 1110px; margin: auto; padding: 70px 28px; display: grid; grid-template-columns: minmax(0, var(--reading-width)) 250px; justify-content: center; gap: 65px; }
.article-body { font-size: 1.08rem; line-height: 2.1; }
.article-body p { margin: 0 0 1.45em; }
.article-body h2 { margin: 2.1em 0 .65em; font-size: clamp(1.9rem, 3vw, 2.55rem); line-height: 1.28; }
.article-body h3 { margin: 1.9em 0 .55em; font-size: 1.55rem; }
.article-body blockquote { position: relative; margin: 2.2em 0; padding: 28px 32px; border: 0; border-radius: 8px 28px 8px 28px; background: color-mix(in srgb, var(--color-lime) 30%, var(--color-surface)); font-size: 1.2rem; font-weight: 700; }
.article-body blockquote::before { content: "”"; position: absolute; inset: -22px auto auto 18px; color: var(--color-primary); font-size: 5rem; line-height: 1; }
.article-body a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 4px; }
.article-side { align-self: start; position: sticky; top: 110px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-soft); transform: rotate(1.5deg); }
.article-side span { color: var(--color-primary); font-size: .7rem; font-weight: 850; }
.article-side p { color: var(--color-muted); line-height: 1.75; }
.source-block { max-width: 980px; margin: 20px auto 90px; padding: clamp(25px, 4vw, 45px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-alt); }
.source-block > h2 { margin: 15px 0 8px; font-size: 2.2rem; }
.source-block > p { margin: 0 0 24px; color: var(--color-muted); }
.source-block dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.source-block dl div { padding: 16px; border-radius: var(--radius-sm); background: var(--color-surface); }
.source-block dt { color: var(--color-muted); font-size: .7rem; }.source-block dd { margin: 8px 0 0; }
.source-block > a { display: inline-block; margin-top: 18px; color: var(--color-secondary); font-weight: 800; }
.related-section { border-top: 1px solid var(--color-border); }
.error-page { position: relative; min-height: 100vh; overflow: hidden; display: grid; place-items: center; align-content: center; padding: 130px 24px; text-align: center; background: var(--color-bg-alt); }
.error-page > span { color: var(--color-primary); font-size: clamp(5rem, 16vw, 12rem); font-weight: 900; line-height: 1; opacity: .25; }
.error-page h1 { max-width: 800px; margin: -25px auto 14px; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.05; }.error-page p { color: var(--color-muted); }

/* Footer */
.site-footer { position: relative; overflow: hidden; margin-top: 40px; padding: 85px clamp(22px, 5vw, 70px) 45px; background: var(--color-text); color: var(--color-bg); }
.footer-shape { position: absolute; width: 340px; height: 340px; inset: -140px auto auto -70px; border: 55px solid var(--color-secondary); border-radius: 50%; opacity: .85; }
.footer-inner { position: relative; z-index: 2; max-width: var(--container-width); margin: auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 55px; }
.footer-brand { display: flex; align-items: center; gap: 17px; }
.footer-brand strong { font-size: clamp(2rem, 4vw, 4.2rem); }.footer-brand p { max-width: 520px; margin: 8px 0 0; color: color-mix(in srgb, var(--color-bg) 65%, transparent); }
.site-footer nav { display: grid; grid-template-columns: repeat(2, 1fr); align-content: start; gap: 14px 24px; padding-top: 12px; }
.site-footer nav a { color: color-mix(in srgb, var(--color-bg) 74%, transparent); font-size: .82rem; }.site-footer nav a:hover { color: var(--color-lime); }
.footer-note { grid-column: 1 / -1; margin: 28px 0 0; padding-top: 25px; border-top: 1px solid color-mix(in srgb, var(--color-bg) 17%, transparent); color: color-mix(in srgb, var(--color-bg) 55%, transparent); font-size: .75rem; }

/* Motion */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity calc(var(--motion-slow) + 230ms) var(--ease-standard), transform calc(var(--motion-slow) + 230ms) var(--ease-playful); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .desktop-nav { display: none; }.menu-button { display: flex; }
  .hero-layout { grid-template-columns: 1fr 430px; gap: 35px; }.hero-copy h1 { font-size: clamp(3.7rem, 7vw, 5.8rem); }
  .section-heading { grid-template-columns: 1fr .75fr; }.section-heading .section-link { grid-column: 1 / -1; justify-self: start; }
  .category-mosaic { grid-template-columns: 1fr 1fr; }.category-large { grid-row: span 2; }.category-wide { grid-column: auto; }
  .topic-grid { grid-template-columns: 1fr 1fr; }.topic-grid .article-card:last-child { grid-column: 1 / -1; }.topic-grid .article-card:last-child .card-link { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .calm-stage .topic-grid { grid-template-columns: 1fr 1fr; }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: minmax(0, var(--reading-width)); }.article-side { position: static; transform: none; }
}
@media (max-width: 820px) {
  .site-header { padding: 10px 12px; }.nav-shell { min-height: 60px; padding: 7px 9px 7px 14px; }.brand-mark { width: 38px; height: 38px; }.brand-copy small { display: none; }.search-button { display: none; }
  .playful-hero { min-height: auto; padding: 120px 20px 105px; }.hero-layout { min-height: 0; grid-template-columns: 1fr; }.hero-copy { text-align: center; }.hero-copy h1 { margin-inline: auto; font-size: clamp(3.4rem, 13vw, 5.5rem); }.hero-copy > p { margin-inline: auto; }.hero-actions { justify-content: center; }.hero-note { margin-inline: auto; text-align: start; }
  .hero-collage { width: min(100%, 530px); min-height: 490px; margin: 0 auto; }.collage-main { inset: 45px 8% 25px; }.collage-sticker { width: 120px; height: 120px; }.scroll-cue { display: none; }
  .site-section { padding: var(--section-space) var(--page-gutter); }.section-heading { display: block; }.section-heading > p { margin-top: 18px; }.section-link { display: inline-block; margin-top: 18px; }
  .category-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }.category-large, .category-tall { grid-row: auto; }.category-large { grid-column: 1 / -1; }.category-round { border-radius: var(--radius-lg); }
  .featured-editorial { grid-template-columns: 1fr; grid-template-rows: auto; }.editorial-large, .editorial-side { grid-row: auto; min-height: 430px; }.editorial-side .card-link { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }.editorial-side .card-visual { min-height: 220px; }.editorial-side .card-content p { display: -webkit-box; }
  .topic-grid, .calm-stage .topic-grid, .latest-grid, .related-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }.topic-grid .article-card:last-child { grid-column: 1 / -1; }.calm-stage .article-card:first-child .card-link, .topic-grid .article-card:last-child .card-link { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .future-card { grid-template-columns: 1fr; }.future-copy { text-align: center; }.future-copy p { margin-inline: auto; }.future-visual { min-height: 250px; }
  .articles-grid .article-card:nth-child(5n + 1) { grid-column: auto; }.articles-grid .article-card:nth-child(5n + 1) .card-link { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .search-form { grid-template-columns: 1fr; border-radius: var(--radius-lg); }.search-form select { border-inline-start: 0; border-top: 1px solid var(--color-border); }.search-form button { border-radius: var(--radius-md); }
  .article-hero { min-height: 610px; padding-inline: 22px; }.article-image { margin-bottom: 35px; }.article-layout { padding-top: 35px; }.source-block { margin-inline: 20px; }.source-block dl { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .nav-shell { border-radius: 20px; }.brand-copy strong { font-size: .98rem; }.menu-button { min-height: 40px; padding-inline: 12px; }
  .playful-hero { padding-inline: 16px; }.hero-copy h1 { font-size: clamp(3rem, 15vw, 4.5rem); }.hero-copy > p { font-size: .96rem; line-height: 1.8; }.hero-actions { flex-direction: column; align-items: stretch; }.hero-note { margin-top: 27px; }.hero-collage { min-height: 400px; }.collage-main { inset-inline: 3%; }.collage-word strong { font-size: 2.8rem; }.collage-card { padding: 11px 13px; }.collage-card-art { left: 0; }.collage-card-science { right: 0; }.collage-sticker { width: 100px; height: 100px; }
  .site-section { padding-inline: var(--page-gutter); }.section-heading h2 { font-size: clamp(2.45rem, 12vw, 3.6rem); }
  .category-mosaic, .topic-grid, .calm-stage .topic-grid, .latest-grid, .related-grid, .articles-grid { grid-template-columns: 1fr; }.category-large, .topic-grid .article-card:last-child { grid-column: auto; }.category-tile { min-height: 245px; }.category-note { transform: none; }
  .article-card, .latest-grid .article-card, .related-grid .article-card { min-height: 390px; }.editorial-side { min-height: 410px; }
  .future-card { padding: 42px 22px; border-radius: var(--radius-lg); }.future-copy h2 { font-size: clamp(2.6rem, 13vw, 4rem); }.future-visual { min-height: 210px; }
  .page-hero, .search-hero { min-height: 540px; padding: 140px 18px 55px; }.page-hero h1, .search-hero h1 { font-size: clamp(3.3rem, 16vw, 5.2rem); }.filter-strip { align-items: stretch; flex-direction: column; border-radius: var(--radius-md); }.filter-strip select { min-width: 0; }
  .results-heading { align-items: flex-start; flex-direction: column; }.results-heading span { margin-inline-start: 0; }
  .article-hero { min-height: 560px; padding: 135px 18px 60px; }.article-hero h1 { font-size: clamp(3.1rem, 14vw, 5rem); }.article-image { margin-top: -20px; padding-inline: 14px; }.article-image img { border-radius: 38px 14px 38px 14px; }.article-layout { padding-inline: 18px; }.article-body { font-size: 1.02rem; line-height: 2; }.article-body blockquote { padding: 25px 20px; }.source-block { margin-inline: 14px; }
  .site-footer { padding-inline: 20px; }.footer-brand { align-items: flex-start; }.footer-brand .brand-mark { margin-top: 6px; }.site-footer nav { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}