@font-face { font-family: "Play Source Sans 3"; src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2"); font-style: normal; font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Play IBM Plex Mono"; src: url("fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --fog: #edf2f5;
  --paper: #fbfcfe;
  --ink: #121826;
  --ink-soft: #343d4d;
  --muted: #697383;
  --rule: #cbd5dd;
  --coral: #ff5a4e;
  --coral-dark: #d94038;
  --cobalt: #3454d1;
  --night: #0e1628;
  --night-soft: #19243a;
  --mint: #b7d8cc;
  --display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --body: "Source Serif 4", Georgia, serif;
  --utility: "IBM Plex Mono", ui-monospace, monospace;
  --shell: min(1380px, calc(100% - 48px));
  --shadow: 0 24px 70px rgba(18, 24, 38, .14);
}

html[data-page="play"] {
  --display: "Play Source Sans 3", Arial, sans-serif;
  --body: "Play Source Sans 3", Arial, sans-serif;
  --utility: "Play IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--fog); color: var(--ink); font: 17px/1.58 var(--body); text-rendering: optimizeLegibility; }
body[data-dialog-open="true"] { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.shell { width: var(--shell); margin-inline: auto; }
.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; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; transform: translateY(-160%); padding: 11px 15px; border-radius: 8px; background: var(--ink); color: white; font: 600 .78rem/1 var(--utility); text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }

.site-header { position: sticky; top: 0; z-index: 80; border-bottom: 1px solid rgba(18,24,38,.13); background: rgba(237,242,245,.93); backdrop-filter: blur(16px); }
.header-inner { min-height: 70px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px,3vw,46px); }
.wordmark { font: 700 .86rem/1 var(--utility); text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--coral-dark); }
.site-nav { justify-self: end; display: flex; align-items: center; gap: clamp(16px,2.2vw,32px); font: 650 .84rem/1 var(--display); }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline 2px; text-underline-offset: 5px; }
.surprise-link { min-height: 40px; padding: 0 17px; border: 0; border-radius: 999px; background: var(--ink); color: white; font: 700 .76rem/1 var(--display); }
.surprise-link:hover { background: var(--coral); color: var(--ink); }
.language-switcher { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(255,255,255,.72); }
.language-switcher a { min-height: 34px; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: var(--muted); font: 700 .66rem/1 var(--utility); text-decoration: none; }
.language-switcher a[aria-current="page"], .language-switcher a:hover { background: var(--ink); color: white; }
.language-dot { width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18,24,38,.16); }
.ro-dot { background: linear-gradient(90deg,#002b7f 0 33.33%,#fcd116 33.33% 66.66%,#ce1126 66.66%); }
.en-dot {
  background:
    linear-gradient(90deg,transparent 42%,#c8102e 42% 58%,transparent 58%),
    linear-gradient(transparent 42%,#c8102e 42% 58%,transparent 58%),
    linear-gradient(90deg,transparent 33%,#fff 33% 67%,transparent 67%),
    linear-gradient(transparent 33%,#fff 33% 67%,transparent 67%),
    linear-gradient(33deg,transparent 39%,#fff 39% 45%,#c8102e 45% 51%,#fff 51% 57%,transparent 57%),
    linear-gradient(-33deg,transparent 39%,#fff 39% 45%,#c8102e 45% 51%,#fff 51% 57%,transparent 57%),
    #012169;
}

.kicker, .section-label { margin: 0 0 17px; color: var(--cobalt); font: 600 .68rem/1.2 var(--utility); letter-spacing: .1em; text-transform: uppercase; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 10px; font: 700 .86rem/1 var(--display); text-decoration: none; }
.button.primary { background: var(--ink); color: white; }
.button.primary:hover { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.button.ghost { background: transparent; }
.button.ghost:hover { background: white; }
.button.light { border-color: white; background: white; color: var(--night); }

.home-hero { min-height: calc(100svh - 70px); display: grid; grid-template-columns: minmax(0,1.12fr) minmax(380px,.88fr); align-items: center; gap: clamp(50px,8vw,130px); padding-block: clamp(72px,10vw,150px); }
.hero-copy h1 { max-width: 820px; margin: 0; font: 780 clamp(4.1rem,8.1vw,8.8rem)/.82 var(--display); letter-spacing: -.075em; }
.hero-copy h1 span { display: inline; }
.underlined { position: relative; z-index: 0; }
.underlined::after { content: ""; position: absolute; z-index: -1; left: -.02em; right: -.02em; bottom: .07em; height: .09em; background: var(--coral); transform: rotate(-.8deg); }
.hero-lede { max-width: 720px; margin: 34px 0 0; color: var(--ink-soft); font-size: clamp(1.08rem,1.55vw,1.4rem); line-height: 1.48; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.collection-line { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 36px 0 0; color: var(--muted); font: 500 .68rem/1.6 var(--utility); }
.collection-line span:not(:first-child)::before { content: "•"; margin-right: 18px; color: var(--coral); }
.hero-index { position: relative; min-height: 565px; }
.index-thread { position: absolute; inset: 7% 25% 6% 42%; border-left: 4px solid var(--coral); transform: rotate(8deg); transform-origin: center; opacity: .95; }
.index-thread::before, .index-thread::after { content: ""; position: absolute; left: -8px; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); }
.index-thread::before { top: 0; }.index-thread::after { bottom: 0; }
.index-slip { position: absolute; width: min(390px,82%); display: grid; grid-template-columns: 42px 1fr; gap: 7px 16px; padding: 22px 24px; border: 1px solid rgba(18,24,38,.14); border-radius: 8px; background: var(--paper); box-shadow: 0 17px 38px rgba(18,24,38,.1); color: var(--ink); text-align: left; text-decoration: none; transform-origin: center; }
button.index-slip { appearance: none; }
.index-slip > span { grid-row: span 2; color: var(--coral-dark); font: 600 .76rem/1 var(--utility); }
.index-slip strong { font: 700 clamp(1.18rem,1.7vw,1.55rem)/1.04 var(--display); }
.index-slip small { color: var(--muted); font: 500 .68rem/1.35 var(--utility); }
.index-slip:hover { z-index: 4; border-color: var(--coral); transform: rotate(0) translateY(-6px); }
.slip-one { top: 1%; left: 0; transform: rotate(-3deg); }
.slip-two { top: 25%; right: 0; transform: rotate(2.5deg); }
.slip-three { top: 51%; left: 5%; transform: rotate(-1.5deg); }
.slip-four { bottom: 0; right: 4%; transform: rotate(1.7deg); }

.section { padding-block: clamp(90px,10vw,155px); }
.section-heading { margin-bottom: clamp(40px,5vw,72px); }
.section-heading h2 { max-width: 980px; margin: 0; font: 740 clamp(2.7rem,5.4vw,6rem)/.91 var(--display); letter-spacing: -.055em; }
.section-heading > p, .split-heading > p { max-width: 520px; margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.split-heading { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 50px; align-items: end; }

.flagship-section { border-top: 1px solid var(--rule); background: var(--fog); }
.flagship-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(250px,auto)) auto; gap: 18px; align-items: stretch; }
.flagship-card { --flagship-accent: var(--coral); position: relative; min-width: 0; grid-column: span 4; overflow: hidden; border: 1px solid rgba(18,24,38,.16); border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 16px 40px rgba(18,24,38,.08); transition: transform .3s ease, box-shadow .3s ease; }
.flagship-card:nth-child(1) { grid-column: span 7; grid-row: span 2; --flagship-accent: var(--coral); }
.flagship-card:nth-child(2) { grid-column: span 5; --flagship-accent: var(--cobalt); }
.flagship-card:nth-child(3) { grid-column: span 5; --flagship-accent: var(--mint); }
.flagship-card:nth-child(4) { --flagship-accent: #d9b889; }
.flagship-card:nth-child(5) { --flagship-accent: #7d8fd8; }
.flagship-card:nth-child(6) { --flagship-accent: #ef917e; }
.flagship-card::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 3; width: 7px; background: var(--flagship-accent); }
.flagship-card-link { display: grid; grid-template-rows: auto 1fr; height: 100%; min-height: 100%; text-decoration: none; }
.flagship-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #dce3e8; }
.flagship-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.flagship-copy { position: relative; display: flex; min-height: 205px; flex-direction: column; padding: 23px 27px 25px 30px; background: var(--paper); }
.flagship-card:hover { transform: translateY(-4px); box-shadow: 0 23px 52px rgba(18,24,38,.14); }
.flagship-card:hover .flagship-media img { transform: scale(1.025); }
.flagship-card:focus-within { outline: 3px solid var(--coral); outline-offset: 4px; }
.flagship-meta { margin-bottom: 12px; color: var(--cobalt); font: 600 .63rem/1.3 var(--utility); letter-spacing: .06em; text-transform: uppercase; }
.flagship-card h3 { max-width: 750px; margin: 0; color: var(--ink); font: 740 clamp(1.7rem,2.55vw,3.15rem)/.98 var(--display); letter-spacing: -.04em; }
.flagship-card p { max-width: 650px; margin: 14px 0 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.42; }
.flagship-cta { display: grid; width: 34px; height: 34px; place-items: center; margin-top: auto; margin-left: auto; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink); font: 700 1rem/1 var(--display); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.flagship-card:hover .flagship-cta, .flagship-card:focus-within .flagship-cta { border-color: var(--flagship-accent); background: var(--flagship-accent); color: var(--ink); }
.flagship-card:nth-child(1) .flagship-card-link { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.flagship-card:nth-child(1) .flagship-media { height: auto; aspect-ratio: 16 / 9; background: #d9e0e6; }
.flagship-card:nth-child(2) .flagship-media { background: #f4eee4; }
.flagship-card:nth-child(3) .flagship-media { background: #dfe7e7; }
.flagship-card:nth-child(4) .flagship-media { background: #e7e4e0; }
.flagship-card:nth-child(5) .flagship-media { background: #e4e8f1; }
.flagship-card:nth-child(6) .flagship-media { background: #24162f; }
.flagship-card:nth-child(1) .flagship-copy { min-height: 0; padding: clamp(28px,3vw,46px) clamp(27px,3vw,42px); background: var(--night); color: white; }
.flagship-card:nth-child(1) .flagship-meta { color: #b9c7ff; }
.flagship-card:nth-child(1) h3 { color: white; font-size: clamp(2.15rem,3.65vw,4.6rem); line-height: .94; }
.flagship-card:nth-child(1) p { color: #dbe2ed; }
.flagship-card:nth-child(1) .flagship-cta { border-color: rgba(255,255,255,.28); color: white; }
.flagship-card:nth-child(1):hover .flagship-cta, .flagship-card:nth-child(1):focus-within .flagship-cta { border-color: var(--flagship-accent); color: var(--ink); }

.constellation-section { overflow: hidden; background: var(--night); color: white; }
.constellation-heading { display: grid; grid-template-columns: .65fr 1.6fr .75fr; gap: 45px; align-items: start; }
.constellation-heading .section-label { color: #9fb1ff; }
.constellation-heading h2 { max-width: 900px; }
.constellation-heading > p:last-child { color: #c7ced9; }
.constellation-list { display: grid; gap: 18px; counter-reset: constellations; }
.constellation { position: relative; display: grid; grid-template-columns: minmax(280px,.92fr) minmax(0,1.6fr); gap: clamp(35px,6vw,90px); align-items: center; padding: clamp(30px,4vw,55px); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.035); counter-increment: constellations; }
.constellation::before { content: "0" counter(constellations); position: absolute; top: 22px; right: 25px; color: rgba(255,255,255,.34); font: 600 .7rem/1 var(--utility); }
.constellation-copy .section-label { color: #9fb1ff; }
.constellation-copy h3 { margin: 0; font: 700 clamp(2rem,3.6vw,4.2rem)/.94 var(--display); letter-spacing: -.045em; }
.constellation-copy > p:last-child { max-width: 620px; margin: 20px 0 0; color: #c8d0db; }
.constellation-projects { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding-top: 38px; }
.constellation-projects::before { content: ""; position: absolute; left: 7%; right: 7%; top: 19px; height: 3px; background: var(--coral); transform: rotate(-.8deg); }
.constellation-projects::after { content: ""; position: absolute; top: 14px; left: 49%; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); }
.constellation-project { position: relative; min-width: 0; overflow: hidden; border-radius: 10px; background: var(--paper); color: var(--ink); transform: rotate(var(--tilt,0)); }
.constellation-project:nth-child(1) { --tilt: -1.5deg; }.constellation-project:nth-child(2) { --tilt: 1deg; }.constellation-project:nth-child(3) { --tilt: -1deg; }
.constellation-project a { display: grid; grid-template-rows: 128px 1fr; height: 100%; text-decoration: none; }
.constellation-project img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.constellation-project span { padding: 14px; }
.constellation-project small { display: block; margin-bottom: 7px; color: var(--cobalt); font: 600 .58rem/1.2 var(--utility); text-transform: uppercase; }
.constellation-project strong { display: block; font: 700 1rem/1.06 var(--display); }
.constellation-project:hover { transform: rotate(0) translateY(-5px); }

.recent-section { background: var(--paper); }
.recent-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--ink); }
.recent-card { min-width: 0; border-right: 1px solid var(--rule); }
.recent-card:last-child { border-right: 0; }
.recent-card a { display: flex; flex-direction: column; height: 100%; padding: 27px 24px 30px; text-decoration: none; }
.recent-meta { color: var(--cobalt); font: 600 .62rem/1.35 var(--utility); text-transform: uppercase; }
.recent-card h3 { margin: 25px 0 10px; font: 720 clamp(1.45rem,2vw,2.1rem)/.98 var(--display); }
.recent-card p { margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.42; }
.recent-card time { margin-top: auto; padding-top: 24px; color: var(--muted); font: 500 .62rem/1 var(--utility); }
.recent-card:hover { background: var(--fog); }

.pathways-section { overflow: hidden; background: var(--night); color: white; }
.pathways-heading .section-label { color: #9fb1ff; }
.pathways-heading > p { color: #c7ced9; }
.pathways-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(310px,.65fr); gap: clamp(25px,4vw,58px); align-items: stretch; }
.pathway-matrix { display: grid; grid-template-columns: minmax(145px,1.25fr) repeat(4,minmax(74px,.75fr)); gap: 7px; align-content: start; }
.pathway-axis, .pathway-column, .pathway-topic { min-width: 0; display: flex; align-items: center; font: 600 .63rem/1.25 var(--utility); }
.pathway-axis { color: #93a0b5; text-transform: uppercase; }
.pathway-column { justify-content: center; padding: 0 4px 10px; color: #d9dfe8; text-align: center; }
.pathway-topic { padding-right: 16px; color: white; font-size: .7rem; }
.pathway-topic[data-pathway-topic-label="language"] { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.pathway-cell { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(255,255,255,.045); color: white; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.pathway-cell strong { font: 720 clamp(1.45rem,2.3vw,2.3rem)/1 var(--display); letter-spacing: -.04em; }
.pathway-cell span { color: #9fb1ff; font: 600 .75rem/1 var(--utility); }
a.pathway-cell:hover, .pathway-cell.is-current { z-index: 1; border-color: var(--coral); background: var(--coral); color: var(--ink); transform: translateY(-2px); }
a.pathway-cell:hover span, .pathway-cell.is-current span { color: var(--ink); }
.pathway-cell.is-empty { justify-content: center; color: #69768c; background: transparent; }
.pathway-preview { min-width: 0; display: grid; grid-template-rows: minmax(210px,.9fr) auto; overflow: hidden; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.pathway-preview-media { min-height: 0; overflow: hidden; background: #dce3e8; }
.pathway-preview-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pathway-preview-copy { padding: clamp(24px,3vw,36px); }
.pathway-preview-label { margin: 0 0 8px; color: var(--cobalt); font: 600 .62rem/1.35 var(--utility); text-transform: uppercase; }
.pathway-preview-overline { margin: 0; color: var(--muted); font: 500 .58rem/1.35 var(--utility); }
.pathway-preview h3 { margin: 18px 0 11px; font: 730 clamp(2rem,3.2vw,3.5rem)/.92 var(--display); letter-spacing: -.045em; }
.pathway-preview h3 + p { margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.45; }
.pathway-preview-actions { display: flex; flex-wrap: wrap; gap: 9px 18px; align-items: center; margin-top: 25px; font: 650 .69rem/1.25 var(--utility); }
.pathway-preview-actions a { text-underline-offset: 4px; }
.pathway-open { margin-left: auto; }

.library-gateway { padding-block: clamp(95px,12vw,180px); background: var(--coral); }
.gateway-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); gap: clamp(55px,9vw,140px); align-items: end; }
.library-gateway .section-label { color: var(--ink); }
.library-gateway h2 { max-width: 790px; margin: 0; font: 760 clamp(3.5rem,7vw,7.8rem)/.84 var(--display); letter-spacing: -.065em; }
.library-gateway h2 > span:first-child { display: block; font-size: 1.45em; }
.library-gateway p { max-width: 650px; }
.gateway-search { padding: clamp(28px,4vw,46px); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
.gateway-search label { display: block; margin-bottom: 16px; font: 700 1.4rem/1 var(--display); }
.gateway-search > div { display: grid; grid-template-columns: 1fr 54px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; }
.gateway-search input { min-width: 0; height: 56px; border: 0; padding: 0 16px; background: white; }
.gateway-search button { border: 0; background: var(--ink); color: white; font: 700 1.4rem/1 var(--display); }
.gateway-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; }
.gateway-links a { padding: 7px 10px; border: 1px solid var(--rule); border-radius: 999px; font: 600 .68rem/1 var(--utility); text-decoration: none; }
.gateway-links a:hover { background: var(--ink); color: white; }

.final-surprise { padding-block: clamp(100px,14vw,210px); background: var(--fog); }
.final-grid { display: grid; grid-template-columns: .5fr 1.5fr auto; gap: 45px; align-items: end; }
.final-grid h2 { max-width: 920px; margin: 0; font: 730 clamp(3rem,6vw,6.6rem)/.9 var(--display); letter-spacing: -.055em; }

.site-footer { padding-block: 30px; border-top: 1px solid var(--rule); background: var(--fog); }
.footer-inner { display: flex; justify-content: space-between; gap: 35px; align-items: end; }
.footer-inner p { margin: 0; color: var(--muted); font: 500 .65rem/1.55 var(--utility); }
.footer-name { color: var(--ink) !important; font: 700 1rem/1 var(--display) !important; }
.footer-name a { color: inherit; text-decoration: none; }
.footer-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.return-top { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.return-top.is-enhanced { position: fixed; right: max(18px,env(safe-area-inset-right)); bottom: var(--return-top-bottom,18px); z-index: 45; visibility: hidden; opacity: 0; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 8px 26px rgba(18,24,38,.18); color: var(--ink); text-decoration: none; pointer-events: none; }
.return-top.is-enhanced.is-visible { visibility: visible; opacity: 1; pointer-events: auto; }
.return-top.is-enhanced span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.surprise-dialog { width: min(850px,calc(100% - 32px)); max-height: min(760px,calc(100svh - 32px)); padding: 0; border: 0; border-radius: 20px; background: transparent; box-shadow: none; overflow: auto; }
.surprise-dialog::backdrop { background: rgba(10,16,29,.75); backdrop-filter: blur(8px); }
.dialog-close { position: absolute; z-index: 3; top: 14px; right: 14px; width: 44px; height: 44px; border: 1px solid rgba(18,24,38,.14); border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink); font: 600 1.55rem/1 var(--display); box-shadow: 0 5px 18px rgba(18,24,38,.12); }
.dialog-close:hover { background: var(--coral); border-color: var(--coral); }
.surprise-card { position: relative; overflow: hidden; padding: clamp(32px,5vw,58px); border: 1px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 0 35px 100px rgba(5,9,18,.45); }
.surprise-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 11px; background: linear-gradient(90deg,var(--coral) 0 23%,var(--cobalt) 23% 44%,var(--mint) 44% 67%,#d9b889 67% 82%,var(--ink) 82% 100%); }
.surprise-topline { display: flex; align-items: center; gap: 17px; padding-right: 48px; }
.surprise-topline .section-label { margin-bottom: 7px; }
.surprise-mark { flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: var(--ink); font: 760 2rem/.8 var(--display); transform: rotate(-8deg); }
.surprise-prompt { margin: 0; color: var(--ink-soft); font: 650 clamp(1rem,1.7vw,1.25rem)/1.12 var(--display); }
.surprise-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(210px,.62fr); gap: clamp(32px,5vw,68px); align-items: end; padding-top: clamp(34px,5vw,55px); }
.surprise-copy { min-width: 0; }
.surprise-meta { margin: 0 0 17px; color: var(--cobalt); font: 600 .64rem/1.3 var(--utility); letter-spacing: .06em; text-transform: uppercase; }
.surprise-copy h2 { max-width: 13ch; margin: 0; font: 740 clamp(2.45rem,5vw,4.8rem)/.89 var(--display); letter-spacing: -.055em; overflow-wrap: anywhere; }
.surprise-deck { max-width: 43ch; margin: 22px 0 0; color: var(--ink-soft); font: 400 1.02rem/1.5 var(--body); }
.surprise-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.surprise-specimen { min-width: 0; margin: 0; transform: rotate(2deg); }
.surprise-image { display: grid; aspect-ratio: 16 / 10; place-items: center; padding: 10px; border: 1px solid rgba(18,24,38,.18); background: var(--night); box-shadow: 9px 11px 0 rgba(18,24,38,.1); }
.surprise-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.surprise-specimen figcaption { margin: 13px 0 0; color: var(--muted); font: 600 .62rem/1.25 var(--utility); text-transform: uppercase; }

/* Library */
.library-hero { padding-block: clamp(80px,10vw,145px) clamp(60px,8vw,110px); }
.library-hero h1 { max-width: 1160px; margin: 0; font: 760 clamp(4rem,8.6vw,9.5rem)/.82 var(--display); letter-spacing: -.07em; }
.library-hero h1 > span:first-child { color: var(--coral-dark); }
.library-hero > p:last-child { max-width: 720px; margin: 35px 0 0; color: var(--ink-soft); font-size: 1.2rem; }
.library-shell { padding-bottom: 140px; }
.library-controls-sentinel { height: 1px; margin-bottom: -1px; }
.library-controls { position: sticky; top: 70px; z-index: 35; margin-bottom: 38px; padding: 22px; border: 1px solid var(--rule); border-radius: 15px; background: rgba(251,252,254,.96); box-shadow: 0 14px 38px rgba(18,24,38,.09); backdrop-filter: blur(16px); }
.library-controls label > span, .choice-group legend { display: block; margin-bottom: 7px; color: var(--muted); font: 600 .61rem/1 var(--utility); text-transform: uppercase; }
.search-field input, .sort-field select { width: 100%; height: 48px; border: 1px solid var(--rule); border-radius: 8px; background: white; padding: 0 13px; }
.search-field input { height: 56px; border-color: var(--ink); font: 600 1.05rem/1 var(--display); }
.filter-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-options { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-choice { min-height: 42px; padding: 0 11px; border: 1px solid var(--rule); border-radius: 999px; background: white; color: var(--ink); font: 600 .63rem/1 var(--utility); cursor: pointer; }
.filter-choice[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }
.sort-field { min-width: 0; }
.topic-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.topic-row button, .result-bar button { min-height: 38px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: white; font: 600 .66rem/1 var(--utility); }
.topic-row button[aria-pressed="true"], .result-bar button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }
.result-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--rule); }
.result-bar > span { font: 700 .8rem/1 var(--utility); }
.result-bar > div { display: flex; gap: 6px; }

@media (min-width: 1101px) {
  .library-controls.is-stuck { grid-template-columns: minmax(360px,1.05fr) minmax(520px,1.35fr); display: grid; gap: 10px 18px; padding: 12px 16px; border-radius: 0 0 14px 14px; box-shadow: 0 16px 34px rgba(18,24,38,.13); }
  .library-controls.is-stuck .search-field { grid-column: 1; }
  .library-controls.is-stuck .filter-row { grid-column: 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; align-self: end; margin-top: 0; }
  .library-controls.is-stuck label > span, .library-controls.is-stuck .choice-group legend { margin-bottom: 4px; font-size: .52rem; }
  .library-controls.is-stuck .search-field input, .library-controls.is-stuck .sort-field select { height: 42px; }
  .library-controls.is-stuck .search-field input { font-size: .9rem; }
  .library-controls.is-stuck .choice-options { gap: 4px; }
  .library-controls.is-stuck .filter-choice { min-height: 32px; padding-inline: 8px; font-size: .56rem; }
  .library-controls.is-stuck .topic-row { grid-column: 1; grid-row: 2; }
  .library-controls.is-stuck .topic-row { align-self: center; gap: 5px; margin-top: 0; }
  .library-controls.is-stuck .topic-row button, .library-controls.is-stuck .result-bar button { min-height: 32px; padding-inline: 9px; font-size: .58rem; }
  .library-controls.is-stuck .result-bar { grid-column: 2; grid-row: 2; align-self: center; margin-top: 0; padding-top: 0; border-top: 0; }
}
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 15px; background: var(--paper); }
.project-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.project-media { aspect-ratio: 16/9; overflow: hidden; background: #dce3e8; }
.project-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .45s ease; }
.project-card:hover .project-media img { transform: scale(1.025); }
.project-card-body { display: flex; flex: 1; flex-direction: column; padding: 21px; }
.project-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--cobalt); font: 600 .58rem/1.3 var(--utility); text-transform: uppercase; }
.project-title { margin: 20px 0 10px; font: 710 clamp(1.45rem,2vw,2.05rem)/1 var(--display); letter-spacing: -.025em; }
.project-summary { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; }
.project-card time { margin-top: auto; padding-top: 24px; color: var(--muted); font: 500 .58rem/1.2 var(--utility); }
.project-editions { padding: 0 21px 20px; }
.edition-heading { display: block; margin-bottom: 8px; color: var(--muted); font: 600 .58rem/1 var(--utility); text-transform: uppercase; }
.edition-links { display: flex; flex-wrap: wrap; gap: 7px; }
.edition-link { font: 600 .65rem/1.25 var(--utility); }
.project-grid[data-view="list"] { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); }
.project-grid[data-view="list"] .project-card { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
.project-grid[data-view="list"] .project-card-link { display: grid; grid-template-columns: 180px minmax(0,1fr); }
.project-grid[data-view="list"] .project-media { aspect-ratio: 16/10; }
.project-grid[data-view="list"] .project-card-body { display: grid; grid-template-columns: minmax(190px,.7fr) minmax(0,1.3fr) auto; gap: 25px; align-items: center; }
.project-grid[data-view="list"] .project-title { margin: 0; }
.project-grid[data-view="list"] .project-summary { max-width: 700px; }
.project-grid[data-view="list"] .project-card time { margin: 0; padding: 0; white-space: nowrap; }
.project-grid[data-view="list"] .project-meta { grid-column: 1/-1; }
.project-grid[data-view="list"] .project-editions { display: none; }
.empty-state { margin: 40px 0; padding: 35px; border: 1px solid var(--rule); border-radius: 12px; background: white; text-align: center; }
.load-more { min-height: 54px; display: block; margin: 38px auto 0; padding: 0 24px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font: 700 .8rem/1 var(--display); }
.load-more:hover { background: var(--ink); color: white; }
.load-more small { margin-left: 6px; font: 500 .62rem/1 var(--utility); }

/* Play room */
.play-hero { position: relative; overflow: hidden; padding-block: clamp(95px,12vw,175px) clamp(68px,8vw,110px); }
.play-hero::after { content: "PLAY"; position: absolute; z-index: -1; right: -.03em; bottom: -.2em; color: rgba(52,84,209,.055); font: 900 clamp(13rem,29vw,31rem)/.8 var(--display); letter-spacing: -.08em; }
.play-hero h1 { max-width: 1450px; margin: 0; font: 900 clamp(4rem,6.2vw,7.8rem)/.92 var(--display); letter-spacing: -.055em; }
.play-intro { max-width: 760px; margin: 38px 0 0; color: var(--ink-soft); font-size: clamp(1.1rem,1.7vw,1.45rem); line-height: 1.48; }
.play-lead-shell { padding-bottom: clamp(90px,12vw,170px); }
.play-lead { position: relative; display: grid; grid-template-columns: minmax(0,.85fr) minmax(420px,1.15fr); overflow: hidden; border: 1px solid var(--ink); border-radius: 24px; background: var(--night); color: white; box-shadow: var(--shadow); }
.play-lead::before { content: "09"; position: absolute; z-index: 0; left: -.03em; bottom: -.18em; color: rgba(255,255,255,.045); font: 900 clamp(12rem,24vw,27rem)/.8 var(--display); }
.play-lead-copy { position: relative; z-index: 1; padding: clamp(36px,5vw,76px); }
.play-lead-copy .section-label { color: #aab8ff; }
.play-lead h2 { max-width: 13ch; margin: 0; font: 900 clamp(3rem,4.9vw,5.7rem)/.94 var(--display); letter-spacing: -.045em; }
.play-lead p:not(.section-label) { max-width: 52ch; margin: 28px 0 0; color: #d9e0eb; font-size: 1.04rem; }
.play-lead .button { margin-top: 34px; border-color: var(--coral); background: var(--coral); color: var(--ink); }
.play-lead-media { min-height: 560px; overflow: hidden; border-left: 1px solid rgba(255,255,255,.18); background: #dce5e9; }
.play-lead-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .5s ease; }
.play-lead:hover .play-lead-media img { transform: scale(1.02); }
.play-section { padding-block: clamp(90px,11vw,160px); }
.play-section-heading { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: clamp(35px,8vw,120px); align-items: end; margin-bottom: clamp(42px,6vw,82px); }
.play-section-heading h2 { max-width: 940px; margin: 0; font: 900 clamp(3rem,5.4vw,6rem)/.94 var(--display); letter-spacing: -.045em; }
.play-section-heading > p:last-child { max-width: 520px; margin: 0; color: var(--ink-soft); font-size: 1.08rem; }
.play-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(15px,2.5vw,30px); }
.play-card { min-width: 0; }
.play-card a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.play-card-media { overflow: hidden; aspect-ratio: 16/9; background: #dce3e8; }
.play-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
.play-card:hover img { transform: scale(1.03); }
.play-card-copy { flex: 1; padding: 25px 23px 28px; }
.play-card-index { display: block; margin-bottom: 21px; color: #b82f29; font: 600 .62rem/1 var(--utility); }
.play-card h3 { margin: 0; font: 850 clamp(1.65rem,2.5vw,2.7rem)/1 var(--display); letter-spacing: -.035em; }
.play-card p { margin: 15px 0 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.44; }
.play-section--short { border-top: 1px solid var(--rule); background: var(--paper); }
.play-section--short .play-card { position: relative; border: 1px solid var(--rule); background: var(--fog); clip-path: polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%); }
.play-section--short .play-card:nth-child(2) { transform: translateY(28px) rotate(.6deg); }
.play-section--short .play-card:nth-child(3) { transform: rotate(-.6deg); }
.play-section--systems { background: var(--night); color: white; }
.play-section--systems .section-label { color: #aab8ff; }
.play-section--systems .play-section-heading > p:last-child { color: #c7d0dc; }
.play-section--systems .play-card { overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: var(--night-soft); }
.play-section--systems .play-card:nth-child(1) { transform: translateY(38px) rotate(-.7deg); }
.play-section--systems .play-card:nth-child(3) { transform: translateY(-22px) rotate(.8deg); }
.play-section--systems .play-card-copy { padding: 29px 27px 33px; }
.play-section--systems .play-card-index { color: #aab8ff; }
.play-section--systems .play-card p { color: #cbd3df; }
.play-library-door { padding-block: clamp(105px,14vw,210px); background: var(--coral); }
.play-library-door .section-label { color: var(--ink); }
.play-library-door a { max-width: 1200px; display: inline-block; color: var(--ink); font: 900 clamp(3.1rem,5.8vw,6.5rem)/.94 var(--display); letter-spacing: -.05em; text-decoration-thickness: .06em; text-underline-offset: .12em; }
html[data-page="play"] .site-footer p { color: #596372; }

@media (max-width: 1100px) {
  .home-hero { grid-template-columns: minmax(0,1fr) minmax(330px,.75fr); gap: 45px; }
  .hero-copy h1 { font-size: clamp(4rem,8vw,6.4rem); }
  .constellation-heading { grid-template-columns: 1fr 2fr; }.constellation-heading > p:last-child { grid-column: 2; }
  .constellation { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .final-grid { grid-template-columns: 1fr auto; }.final-grid .section-label { grid-column: 1/-1; }
  .library-controls { position: static; }
  .play-lead { grid-template-columns: minmax(0,.9fr) minmax(350px,1.1fr); }
  .play-lead-media { min-height: 500px; }
}

@media (max-width: 780px) {
  :root { --shell: min(100% - 28px,1380px); }
  .header-inner { min-height: 63px; grid-template-columns: 1fr auto auto; gap: 10px; }
  .site-nav a { display: none; }
  .site-nav a[data-play-link] { display: inline; }
  .site-nav .surprise-link { display: none; }
  .home-hero { min-height: auto; grid-template-columns: 1fr; padding-block: 70px 92px; }
  .hero-copy h1 { font-size: clamp(3.6rem,17vw,5.8rem); line-height: .86; }
  .hero-index { min-height: 575px; margin-top: 15px; }
  .index-slip { width: 87%; }
  .section { padding-block: 88px; }
  .split-heading, .constellation-heading, .gateway-grid { grid-template-columns: 1fr; gap: 25px; }
  .constellation-heading > p:last-child { grid-column: auto; }
  .flagship-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 18px; }
  .flagship-card, .flagship-card:nth-child(1), .flagship-card:nth-child(2), .flagship-card:nth-child(3), .flagship-card:nth-child(n+4) { grid-column: auto; grid-row: auto; min-height: 0; }
  .flagship-card-link, .flagship-card:nth-child(1) .flagship-card-link { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .flagship-card:nth-child(1) .flagship-media { height: auto; aspect-ratio: 16 / 9; }
  .flagship-copy, .flagship-card:nth-child(1) .flagship-copy { min-height: 190px; padding: 22px 24px 24px 28px; }
  .flagship-card h3, .flagship-card:nth-child(1) h3 { font-size: clamp(1.85rem,7.6vw,3rem); line-height: .99; }
  .constellation { padding: 27px 20px; }
  .constellation-projects { grid-template-columns: 1fr; padding: 0 0 0 27px; }
  .constellation-projects::before { left: 7px; right: auto; top: 6%; bottom: 6%; width: 3px; height: auto; }
  .constellation-projects::after { top: 48%; left: 2px; }
  .constellation-project a { grid-template-columns: 120px 1fr; grid-template-rows: 115px; }
  .recent-grid { grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
  .recent-card { border-right: 0; border-bottom: 1px solid var(--rule); }
  .pathways-layout { grid-template-columns: 1fr; }
  .pathway-preview { grid-template-columns: minmax(150px,.7fr) minmax(0,1.3fr); grid-template-rows: auto; }
  .pathway-preview-media { min-height: 310px; }
  .gateway-grid { align-items: stretch; }.gateway-search { min-width: 0; }
  .final-grid { grid-template-columns: 1fr; align-items: start; }
  .final-grid .section-label { grid-column: auto; }
  .footer-inner { align-items: start; }
  .surprise-dialog { width: calc(100% - 20px); max-height: calc(100svh - 20px); border-radius: 16px; }
  .dialog-close { top: 10px; right: 10px; }
  .surprise-card { padding: 31px 21px 25px; border-radius: 16px; }
  .surprise-topline { gap: 12px; padding-right: 38px; }
  .surprise-mark { width: 45px; height: 45px; font-size: 1.6rem; }
  .surprise-topline .section-label { margin-bottom: 5px; }
  .surprise-prompt { font-size: 1rem; }
  .surprise-body { grid-template-columns: 1fr; gap: 24px; padding-top: 30px; }
  .surprise-meta { margin-bottom: 12px; }
  .surprise-copy h2 { max-width: none; font-size: clamp(2.25rem,11vw,3.35rem); }
  .surprise-deck { margin-top: 15px; font-size: .96rem; line-height: 1.42; }
  .surprise-actions { display: grid; grid-template-columns: 1fr; margin-top: 22px; }
  .surprise-actions .button { width: 100%; }
  .surprise-specimen { width: min(100%,330px); margin-inline: auto; transform: rotate(-1deg); }
  .surprise-image { padding: 8px; }
  .surprise-specimen figcaption { margin-top: 10px; }
  .library-hero h1 { font-size: clamp(3.8rem,17vw,6rem); }
  .filter-row { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .project-grid[data-view="list"] .project-card-link { grid-template-columns: 110px minmax(0,1fr); }
  .project-grid[data-view="list"] .project-card-body { grid-template-columns: 1fr; gap: 8px; padding: 15px; }
  .project-grid[data-view="list"] .project-summary { display: none; }
  .project-grid[data-view="list"] .project-card time { white-space: normal; }
  .play-hero { padding-top: 80px; }
  .play-hero h1 { font-size: clamp(3.5rem,13vw,5.7rem); line-height: .96; }
  .play-lead { grid-template-columns: 1fr; }
  .play-lead-media { min-height: 0; aspect-ratio: 16/10; border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
  .play-section-heading { grid-template-columns: 1fr; gap: 24px; }
  .play-card-grid { grid-template-columns: 1fr; }
  .play-section--short .play-card:nth-child(2), .play-section--short .play-card:nth-child(3), .play-section--systems .play-card:nth-child(1), .play-section--systems .play-card:nth-child(3) { transform: none; }
}

@media (max-width: 430px) {
  body { font-size: 16px; }
  .wordmark { font-size: .75rem; }
  .language-switcher a { padding-inline: 7px; }
  .language-switcher a span:last-child { display: none; }
  .hero-actions { display: grid; }.hero-actions .button { width: 100%; }
  .collection-line { display: block; }.collection-line span { display: block; margin-top: 5px; }.collection-line span:not(:first-child)::before { margin-right: 8px; }
  .hero-index { min-height: 590px; }.index-slip { width: 92%; padding: 19px; }
  .slip-one { left: 0; }.slip-two { right: 0; }.slip-three { left: 2%; }.slip-four { right: 0; }
  .flagship-card, .flagship-card:nth-child(1) { min-height: 0; }
  .flagship-card h3, .flagship-card:nth-child(n+4) h3 { font-size: 1.95rem; }
  .constellation-project a { grid-template-columns: 98px 1fr; }
  .pathway-matrix { grid-template-columns: minmax(76px,1.1fr) repeat(4,minmax(44px,.7fr)); gap: 4px; }
  .pathway-axis { font-size: .5rem; }
  .pathway-column { padding: 0 1px 8px; font-size: .48rem; hyphens: auto; }
  .pathway-topic { padding-right: 5px; font-size: .53rem; }
  .pathway-cell { min-height: 58px; padding: 7px; border-radius: 6px; }
  .pathway-cell strong { font-size: 1.2rem; }
  .pathway-cell span { display: none; }
  .pathway-preview { grid-template-columns: 1fr; }
  .pathway-preview-media { min-height: 190px; max-height: 230px; }
  .pathway-open { margin-left: 0; }
  .library-gateway h2 > span:first-child { font-size: 1.2em; }
  .gateway-search { padding: 23px 18px; }
  .result-bar { align-items: flex-start; }.result-bar > div { flex-wrap: wrap; justify-content: flex-end; }
  .footer-inner { display: grid; }
  .play-lead h2 { font-size: 2.85rem; }
  .play-lead-copy { padding: 32px 24px 38px; }
  .play-section-heading h2 { font-size: 3.2rem; }
  .play-library-door a { font-size: 3.1rem; }
}

html[lang="ro"][data-page="play"] .play-hero h1 { line-height: 1; }
html[lang="ro"][data-page="play"] .play-lead h2 { line-height: 1.02; }
html[lang="ro"][data-page="play"] .play-section-heading h2,
html[lang="ro"][data-page="play"] .play-library-door a { line-height: 1.02; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .return-top.is-enhanced { transition: none !important; }
}

@media print {
  .site-header, .surprise-dialog, .return-top.is-enhanced, .hero-actions, .library-controls, .load-more { display: none !important; }
  body { background: white; }
}