@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');
:root{--paper:#f3eee4;--ink:#141210;--accent:#e8a838}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Archivo,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}header{position:absolute;top:0;left:0;right:0;height:100px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;z-index:30;pointer-events:none}header>*{pointer-events:auto}.brand{display:block;width:150px}.brand img{display:block;width:100%;height:auto;transition:filter .8s}.inside .brand img{filter:brightness(0) invert(1)}#language{border:0;background:none;color:var(--ink);font:11px monospace;padding:12px;transition:color .8s}.inside #language{color:var(--paper)}.universe{position:relative;background:transparent;isolation:isolate;width:100%;height:100svh;min-height:600px;overflow:hidden}.space-backdrop{position:absolute;inset:0;background:#141513;clip-path:circle(0% at 50% 50%);transition:clip-path 2.25s cubic-bezier(.76,0,.22,1);z-index:-1}[data-state=entering] .space-backdrop,[data-state=open] .space-backdrop{clip-path:circle(150% at 50% 50%)}canvas,.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.2s}.grain{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.45' d='M0 0h180v180H0z'/%3E%3C/svg%3E");z-index:5}[data-state=open] canvas{opacity:1}[data-state=open] .grain{opacity:.07}.world{position:absolute;inset:145px 35px 140px}.seed{position:absolute;left:50%;top:50%;width:clamp(125px,14vw,190px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;background:transparent;z-index:8}.orb{position:absolute;inset:0;border-radius:50%;background:#141210;transition:background 1s ease,box-shadow 1s ease,transform .8s ease}.seed:hover .orb,.seed:focus-visible .orb{background:var(--accent);box-shadow:0 0 75px #e8a83820;transform:scale(1.05)}[data-state=closed] .seed{top:calc((100svh - 285px)/2 + 0px)}
/* The full-screen centre stays independent of the space reserved for the opened scene. */
[data-state=closed] .world,[data-state=entering] .world{inset:0}[data-state=closed] .seed{top:50%}[data-state=entering] .seed{top:50%;pointer-events:none}[data-state=entering] .orb{animation:dive 2.25s cubic-bezier(.76,0,.22,1) forwards}[data-state=open] .seed{visibility:hidden;opacity:0;pointer-events:none}@keyframes dive{0%{background:var(--accent);transform:scale(1)}22%{background:var(--accent);transform:scale(.72)}100%{background:#141513;transform:scale(35)}}.origin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:35px;height:35px;border-radius:50%;background:var(--accent);box-shadow:0 0 60px #e8a83820;opacity:0;transition:opacity 1s,background .6s,box-shadow .6s}[data-state=open] .origin{opacity:1}.origin.is-selected{background:#e5e0c8;box-shadow:0 0 70px #e5e0c830}.topline,.bottomline{position:absolute;left:4.5%;right:4.5%;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1.4px;color:#858b79;z-index:6;pointer-events:none;opacity:0;transition:opacity 1s}.topline{top:112px}.topline i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:7px}.bottomline{bottom:30px}.cross{color:var(--accent);margin:0 12px;font-size:10px}[data-state=open] .topline,[data-state=open] .bottomline{opacity:1}#ideas{position:absolute;inset:0}.idea{position:absolute;left:50%;top:50%;border:1px solid #c6c5b02a;background:#1b1e18e8;border-radius:100px;color:#d5d5c6;padding:10px 15px;white-space:nowrap;font-size:clamp(10px,.88vw,13px);letter-spacing:-.15px;will-change:transform;transition:color .25s,border-color .25s,background .25s,opacity .4s,padding .25s;opacity:0;z-index:2}.idea:before{content:'';display:inline-block;width:4px;height:4px;background:#8a8d72;border-radius:50%;margin:0 9px 2px 0}.idea[data-category=creation]:before{background:#e8a838}.idea[data-category=digital]:before{background:#a5b6cb}.idea:hover,.idea:focus-visible,.idea[aria-pressed=true]{color:#171910;background:var(--accent);border-color:var(--accent);z-index:4;padding:12px 18px;box-shadow:0 0 30px #e8a83825}.idea:hover:before,.idea[aria-pressed=true]:before{background:#171910}.idea.dimmed{opacity:.12!important;pointer-events:none}.controls{position:absolute;bottom:65px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;gap:16px;z-index:9}.controls button{border:1px solid #b6baa22a;color:#999e8b;background:transparent;padding:8px 12px;border-radius:30px;font-size:10px}.filters,.motion-controls{display:flex;gap:6px}.filters button[aria-pressed=true]{color:#141513;background:var(--paper);border-color:var(--paper)}.controls button:hover{border-color:#b6baa2}.motion-controls button{border-color:transparent}#detail{position:absolute;right:4.5%;top:145px;width:315px;max-width:calc(100% - 40px);padding:30px;background:var(--paper);color:var(--ink);z-index:12;box-shadow:0 20px 80px #0008;border-top:3px solid var(--accent);animation:detail-in .35s ease-out}#detail-category{font:9px monospace;letter-spacing:1.5px;text-transform:uppercase;color:#7d735d}#detail h2{font-size:29px;line-height:1.08;letter-spacing:-1px;margin:24px 0 16px}#detail p{font-size:13px;line-height:1.65;color:#6c685e}#detail a{display:block;margin-top:28px;padding-top:18px;border-top:1px solid #1a1a1a30;color:var(--ink);font-size:11px;text-decoration:none}#close-detail{position:absolute;right:12px;top:10px;border:0;background:none;font-size:22px;padding:5px 10px;color:#777}@keyframes detail-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.ktb-cursor{position:fixed;pointer-events:none;top:0;left:0;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;z-index:9999;transform:translate(-100px,-100px);transition:width .18s,height .18s,background-color .18s,border-color .18s;visibility:hidden}.ktb-cursor:after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:var(--ink);border-radius:50%;transform:translate(-50%,-50%)}.cursor-ready .ktb-cursor{visibility:visible}.inside .ktb-cursor{border-color:var(--paper)}.inside .ktb-cursor:after{background:var(--paper)}.ktb-cursor.hover{width:36px;height:36px;background:var(--accent);border-color:var(--accent)}.ktb-cursor.hover:after{background:var(--ink)}@media(hover:hover) and (pointer:fine){body.cursor-ready,body.cursor-ready a,body.cursor-ready button{cursor:none}}@media(pointer:coarse),(hover:none){.ktb-cursor{display:none!important}}@media(max-width:800px){header{height:80px}.brand{width:125px}.universe{min-height:100svh}[data-state=open].universe{min-height:920px}.world{inset:125px 12px 155px}.seed{width:135px}.topline{top:92px;font-size:8px;letter-spacing:.7px}.bottomline{font-size:8px;letter-spacing:.7px;bottom:25px}.bottomline>span:last-child{display:none}.idea{font-size:10px;padding:9px 11px;max-width:calc((100vw - 24px)/2 - 10px);width:max-content;white-space:normal;line-height:1.25}.idea:hover,.idea:focus-visible{padding:10px 12px}.controls{bottom:58px;align-items:center;flex-direction:column}.controls button{font-size:10px}#detail{right:20px;top:125px;width:300px}.origin{width:23px;height:23px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.ktb-cursor.on-paper{border-color:var(--ink)}.ktb-cursor.on-paper:after{background:var(--ink)}
[data-state=closed] .orb{animation:dot-color 6s ease-in-out infinite}
[data-state=closed] .seed:hover .orb,[data-state=closed] .seed:focus-visible .orb{animation:none;background:var(--accent)}
@keyframes dot-color{0%,30%,100%{background:#141210}58%,70%{background:#e8a838}}

/* The seed label belongs to the same keyboard/touch target as the dot. */
.seed-label{position:absolute;top:calc(100% + 30px);left:50%;transform:translateX(-50%);white-space:nowrap;font:500 12px Archivo,Arial,sans-serif;letter-spacing:.08em;color:var(--ink);transition:opacity .3s,transform .3s}
.seed:hover .seed-label{transform:translateX(-50%) translateY(3px)}
[data-state=entering] .seed-label{opacity:0}
[data-state=entering] canvas{opacity:1;z-index:10}
header nav{display:flex;gap:23px;margin-left:auto;margin-right:34px;align-items:center}header nav a{font-size:11px;color:var(--ink);text-decoration:none;transition:color .5s}header nav a[aria-current]{border-bottom:1px solid var(--accent);padding-bottom:4px}.inside header nav a{color:var(--paper)}
.no-script{position:absolute;bottom:30px;left:10%;right:10%;font-size:14px;line-height:1.5}
@media(max-width:900px){header nav{gap:13px;margin-right:15px}header nav a{font-size:10px}}
@media(max-width:700px){header nav{gap:12px;margin-right:4px}header nav a{display:none}header nav a:nth-child(2),header nav a:nth-child(6){display:block;font-size:10px}.brand{width:112px}.motion-controls{flex-wrap:wrap;justify-content:center}#detail{max-height:calc(100svh - 155px);overflow:auto}#next{border-color:#b6baa22a}.seed-label{font-size:12px}}
@media(min-width:800px){.idea{max-width:calc((100vw - 70px)*.185);white-space:normal;line-height:1.35;text-align:center}}
@media(max-width:700px){#detail{position:fixed;top:100px}}

/* A native scroll runway moves the camera; the scene itself stays in the viewport. */
body.journey-open{background:#141513}
main{position:relative}
.universe{position:sticky;top:0;height:100svh;min-height:0;--galaxy-color:#e8a838}
[data-state=open].universe{min-height:0}
header{position:fixed}
.world{inset:260px 35px 140px}
#galaxy-heading{position:absolute;left:4.5%;top:146px;z-index:6;pointer-events:none;max-width:75%}
#galaxy-number{font:9px monospace;letter-spacing:2px;color:var(--galaxy-color)}
#galaxy-name{font-size:44px;letter-spacing:-1.8px;font-weight:500;line-height:1;margin:10px 0;color:var(--paper)}
#galaxy-description{font-size:12px;line-height:1.5;color:#a7aa9b;margin:0}
.origin{background:var(--galaxy-color);transition:background .5s,box-shadow .5s}
.origin.is-selected{background:#e5e0c8}
.idea:hover,.idea:focus-visible,.idea[aria-pressed=true]{background:var(--galaxy-color);border-color:var(--galaxy-color)}
.topline i,.cross{background:var(--galaxy-color)}
.cross{background:none;color:var(--galaxy-color)}
.controls{align-items:center;bottom:58px}
#scroll-hint{font-size:11px;line-height:1.4;color:#aeb29e;letter-spacing:.02em}
#scroll-hint:before{content:'↓';display:inline-block;color:var(--galaxy-color);font-size:17px;margin-right:12px}
[data-galaxy=digital] #scroll-hint:before{content:'↑'}
#galaxy-navigation{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:10px}
.controls #galaxy-navigation button{width:36px;height:36px;border:1px solid transparent;padding:0;background:transparent;display:grid;place-items:center;border-radius:50%}
#galaxy-navigation button span{display:block;width:6px;height:6px;border-radius:50%;background:#69715e;transition:background .4s,transform .4s}
#galaxy-navigation button[aria-current] span{background:var(--galaxy-color);transform:scale(1.3)}
.controls #galaxy-navigation button[aria-current]{border-color:var(--galaxy-color)}
#detail{position:fixed;overscroll-behavior:contain;max-height:calc(100svh - 170px);overflow:auto;border-top-color:var(--galaxy-color)}
#detail a{line-height:1.5}
@media(max-width:900px){.world{inset:250px 25px 140px}.idea{max-width:29vw}}
@media(max-width:700px){
  .world{inset:195px 12px 125px}
  #galaxy-heading{top:113px;max-width:91%}
  #galaxy-number{font-size:8px;letter-spacing:1.2px}
  #galaxy-name{font-size:29px;letter-spacing:-1px;margin:7px 0}
  #galaxy-description{font-size:10px;line-height:1.4;max-width:290px}
  .idea{font-size:clamp(9px,2.4vw,10px);padding:6px 8px;max-width:calc((100vw - 24px)/2 - 12px);line-height:1.25}
  .idea:before{width:3px;height:3px;margin-right:5px}
  .idea:hover,.idea:focus-visible,.idea[aria-pressed=true]{padding:7px 9px}
  .controls{bottom:43px;gap:10px;align-items:flex-start}
  #scroll-hint{font-size:10px;max-width:65%;min-height:29px;display:flex;align-items:center}
  #galaxy-navigation{left:auto;right:0;top:0;transform:none;gap:0}
  .controls #galaxy-navigation button{width:31px;height:31px}
  .motion-controls{gap:6px}
  .controls .motion-controls button{padding:5px 8px;font-size:9px}
  .bottomline{bottom:14px;font-size:7px}
  #detail{top:90px;max-height:calc(100svh - 110px)}
}
@media(max-height:650px) and (min-width:701px){
  #galaxy-heading{top:108px}#galaxy-name{font-size:28px;margin:5px 0}#galaxy-description{font-size:10px}
  .topline{top:90px}.world{inset:180px 25px 110px}.controls{bottom:48px}.bottomline{bottom:17px}.idea{font-size:10px;padding:6px 10px}
}
@media(max-width:700px){.world{inset:185px 12px 110px}}
@media(max-width:360px){.idea{font-size:9px;padding:5px 7px;line-height:1.2}.idea:hover,.idea:focus-visible,.idea[aria-pressed=true]{padding:6px 8px}}
@media(max-width:700px){.world{inset:210px 12px 105px}.origin{width:20px;height:20px}}
/* Keep the selected phrase visible by opening its description on the opposite side. */
#detail{animation:none}
@media(min-width:901px){#detail[data-side=left]{left:4.5%;right:auto}#detail[data-side=right]{left:auto;right:4.5%}}
/* RAF owns travel opacity; a CSS transition here would keep chasing every frame. */
.idea{will-change:auto;transition:color .25s,border-color .25s,background .25s,padding .25s}
.idea:not([hidden]){will-change:transform,opacity}
.world{contain:layout style}
@media(max-width:700px),(pointer:coarse){
  .idea,.idea:hover,.idea:focus-visible,.idea[aria-pressed=true]{transition:color .2s,border-color .2s,background .2s}
}

/* A note unfolds from the small portal reached by the central connection. */
#detail{transform-origin:var(--portal-x,50%) var(--portal-y,100%)}
#detail[data-state=opening],#detail[data-state=closing]{will-change:clip-path,transform,opacity}
#detail[data-state=closing]{pointer-events:none}
@media(prefers-reduced-motion:reduce){#detail{will-change:auto}}

/* Six selected ideas per mobile galaxy: larger type, generous targets, open centre. */
@media(max-width:700px){
 .idea,.idea:hover,.idea:focus-visible,.idea[aria-pressed=true]{font-size:clamp(12px,3.45vw,14px);line-height:1.3;padding:10px 12px;min-height:44px;max-width:calc((100vw - 24px)*.46);color:#f3eee4;border-color:#d5d5c64f;background:#20251cf5;font-weight:500}
 .idea[data-wide=true]{max-width:76%;min-width:65%}
 .idea:hover,.idea:focus-visible,.idea[aria-pressed=true]{color:#141513;background:var(--galaxy-color);border-color:var(--galaxy-color)}
 .idea:before{width:4px;height:4px;background:var(--galaxy-color)}
}