@font-face{font-family:Anton;src:url('assets/anton.ttf') format('truetype');font-display:swap}@font-face{font-family:Barlow;src:url('assets/barlow-condensed.ttf') format('truetype');font-display:swap}
:root{--paper:#e2d0ae;--ink:#421c32;--pink:#dc6193;--teal:#286b66;--lime:#a3ac35;--coral:#df694f}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink)}body{margin:0;min-height:100svh;font-family:Barlow,sans-serif;isolation:isolate}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.19;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='%23876f56' filter='url(%23n)' opacity='.55' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:8px}button{transition:color .25s ease}button:hover{color:var(--teal)}.skip-link{position:fixed;top:-80px;left:20px;z-index:30;background:var(--paper);padding:12px;color:var(--ink)}.skip-link:focus{top:12px}.ink-shapes{position:absolute;inset:0;overflow:hidden;z-index:-1;min-height:100%;pointer-events:none}.orb{position:absolute;display:block;border-radius:50%;mix-blend-mode:multiply}.teal{width:35vw;height:35vw;right:-14vw;top:-12vw;background:#a4c6b4}.acid{width:37vw;height:37vw;right:-24vw;top:4vw;background:#c6ca68}.coral{width:30vw;height:30vw;left:-17vw;bottom:10vh;background:#ed9892}.plum{width:37vw;height:37vw;left:-19vw;bottom:-10vw;background:#795069}header{height:110px;padding:28px 3.5%;display:flex;align-items:flex-start;justify-content:space-between}.brand{display:block;color:var(--ink);width:64px;height:48px}.icon{display:block;width:100%;height:100%;overflow:visible}nav{display:flex;gap:44px;padding-top:6px}nav button{font-size:15px;text-transform:uppercase;letter-spacing:.28em;padding:8px 0;position:relative}nav button:after{content:"";position:absolute;bottom:0;left:0;width:95%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}nav button:focus-visible:after{transform:scaleX(1)}main{min-height:calc(100svh - 180px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 24px 125px;position:relative}.manifesto{position:absolute;left:4.1%;top:9%;margin:0;display:grid;gap:6px;font-size:25px;text-transform:uppercase;letter-spacing:.17em;line-height:1.25}.manifesto span:nth-child(1){color:var(--coral)}.manifesto span:nth-child(2){color:var(--pink)}.manifesto span:nth-child(3){color:var(--teal)}.manifesto span:nth-child(4){color:#929b2d}.identity{text-align:center;width:min(660px,57vw)}h1{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;margin:0;line-height:.99;letter-spacing:-.035em;font-size:clamp(90px,14.2vw,182px)}h1 span{display:block}h1 span:first-child{font-size:1.045em}h1 span:last-child{font-size:.98em}.tagline{text-transform:uppercase;font-size:19px;letter-spacing:.39em;margin:20px -30px 0;white-space:nowrap}.disciplines{display:flex;justify-content:center;margin-top:43px}.disciplines button{width:25%;height:82px;padding:0 32px;position:relative}.disciplines button+button:before{content:"";position:absolute;width:1px;height:58px;background:#421c3260;left:0;top:12px}.disciplines button:hover{color:var(--category-color)}.disciplines .icon{height:76px}.music{--category-color:var(--lime);color:var(--category-color)}.games{--category-color:var(--pink);color:var(--category-color)}.software{--category-color:#57304f;color:var(--category-color)}.experiments{--category-color:var(--teal);color:var(--category-color)}.caption{display:block;opacity:var(--engaged,0);transition:opacity .35s ease;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-top:7px}.enter{position:absolute;bottom:0;display:grid;gap:5px;text-transform:uppercase;font-size:15px;letter-spacing:.26em;padding:12px 25px}.enter span{font-family:Arial,sans-serif;font-size:36px;line-height:1;letter-spacing:0;font-weight:300}footer{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 3.5%;font-size:12px;text-transform:uppercase;letter-spacing:.19em;gap:20px}.est,.mediums{display:flex;align-items:center;gap:22px}.est{color:var(--paper)}.est:before,.mediums:after{content:"";width:37px;height:1px;background:currentColor}dialog{background:var(--paper);color:var(--ink);border:1px solid #421c3230;width:min(550px,calc(100% - 40px));padding:50px;box-shadow:0 24px 100px #24112233}dialog::backdrop{background:#291b2b80;backdrop-filter:blur(5px)}dialog .close{position:absolute;right:15px;top:8px;font-size:35px}dialog h2{font:400 56px/1.1 Anton,sans-serif;text-transform:uppercase;margin:20px 0}dialog p:not(.eyebrow){font:20px/1.6 Barlow,sans-serif;max-width:32ch}.eyebrow{text-transform:uppercase;letter-spacing:.25em;font-size:14px}.panel-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin:25px 0}.panel-links button,.back{padding:6px 0;border-bottom:1px solid currentColor;font-size:16px}.back{text-transform:uppercase;letter-spacing:.13em;font-size:13px}body:has(dialog[open]){overflow:hidden}
@media(min-width:1500px){.identity{width:730px}h1{font-size:205px}.tagline{font-size:21px}}
@media(max-width:900px){.manifesto{font-size:19px}.identity{width:65vw}h1{font-size:16vw}.tagline{font-size:15px;letter-spacing:.3em}.disciplines button{padding:0 20px}.disciplines .icon{height:64px}}
@media(max-width:600px){header{height:95px;padding:23px 23px}.brand{width:46px;height:36px}nav{gap:21px;padding-top:1px}nav button{font-size:13px;letter-spacing:.18em}main{min-height:calc(100svh - 160px);padding:95px 22px 116px;justify-content:center}.identity{width:100%;max-width:440px}h1{font-size:24vw;line-height:1.06}.tagline{font-size:12px;letter-spacing:.23em;margin:17px -10px 0;white-space:normal}.manifesto{top:10px;left:0;width:100%;display:flex;justify-content:center;gap:14px;font-size:14px;letter-spacing:.12em}.disciplines{margin-top:30px}.disciplines button{height:58px;padding:0 18px}.disciplines .icon{height:50px}.disciplines button+button:before{height:40px;top:5px}.caption{font-size:10px;letter-spacing:.1em}.enter{bottom:6px;font-size:13px}.enter span{font-size:30px}footer{height:65px;padding:0 23px;font-size:10px;letter-spacing:.12em}.est{color:var(--ink);white-space:nowrap}.est:before,.mediums:after{display:none}.mediums{max-width:180px;text-align:right;line-height:1.8}.teal{width:65vw;height:65vw;right:-38vw;top:-15vw}.acid{width:60vw;height:60vw;right:-44vw;top:15vw}.coral{width:58vw;height:58vw;left:-43vw;bottom:5vh}.plum{width:60vw;height:60vw;left:-43vw;bottom:-4vw}dialog{padding:35px 28px}dialog h2{font-size:44px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}@media(max-height:700px) and (min-width:601px){main{padding-top:10px;padding-bottom:80px}h1{font-size:min(12vw,130px)}.identity{width:540px}.tagline{font-size:15px}.disciplines{margin-top:24px}.manifesto{top:5%}}

/* Color-only drift. Upper circles keep their pale tints; the lower pair
   traverse the complete palette, with deep tones behind the cream date. */
.orb{--anchor:65%;animation:ink-drift 27s ease-in-out infinite}
.orb.teal{--base:#a4c6b4;animation-duration:27s;animation-delay:-3.7s}
.orb.acid{--base:#c6ca68;animation-duration:33s;animation-delay:-11.3s}
.orb.coral{--base:#ed9892;--anchor:0%;animation-duration:37s;animation-delay:-19.1s}
.orb.plum{animation-name:ink-drift-deep;animation-duration:40s;animation-delay:-29.4s}
@keyframes ink-drift{
  0%,100%{background-color:color-mix(in srgb,var(--base) var(--anchor),#ed9892)}
  16.667%{background-color:color-mix(in srgb,var(--base) var(--anchor),#dc6193)}
  33.333%{background-color:color-mix(in srgb,var(--base) var(--anchor),#795069)}
  50%{background-color:color-mix(in srgb,var(--base) var(--anchor),#286b66)}
  66.667%{background-color:color-mix(in srgb,var(--base) var(--anchor),#a4c6b4)}
  83.333%{background-color:color-mix(in srgb,var(--base) var(--anchor),#c6ca68)}
}

@keyframes ink-drift-deep{
  0%,100%{background-color:#944d45}
  16.667%{background-color:#8c426c}
  33.333%{background-color:#633953}
  50%{background-color:#285e5a}
  66.667%{background-color:#476b59}
  83.333%{background-color:#666d2e}
}
/* The button and SVG stay anchored; only selected paths inside the SVG move. */
.disciplines button,.brand{--engaged:0}
.disciplines button:is(:focus-visible,.is-tapped),.brand:focus-visible{--engaged:1}
.motion-detail{transition:transform 400ms cubic-bezier(.2,.65,.3,1),opacity 400ms ease,stroke-width 350ms ease}
.key-one{transform:translateY(calc(var(--engaged)*.8px))}
.key-two{transform:translateY(calc(var(--engaged)*.55px));transition-duration:450ms}
.synth-light{stroke-width:calc(2px + var(--engaged)*.7px);transition:stroke-width 350ms ease}
.stick{transform:translate(calc(var(--engaged)*.55px),calc(var(--engaged)*-.3px))}
.game-button{transform:translateY(calc(var(--engaged)*.45px));stroke-width:calc(2px - var(--engaged)*.45px)}
.window-pane{transform:translateX(calc(var(--engaged)*1.1px))}
.window-content{opacity:calc(.18 + var(--engaged)*.52);transform:translateX(calc(var(--engaged)*.6px));transition-duration:450ms}
.liquid{transform-origin:12px 15px;transform:rotate(calc(var(--engaged)*-3deg));transition-duration:450ms}
.bubble{opacity:calc(var(--engaged)*.65);transform:translate(calc(var(--engaged)*.3px),calc(var(--engaged)*-4px));transition-duration:500ms}
.eye-focus{transform:translate(calc(var(--engaged)*.55px),calc(var(--engaged)*-.2px))}
.enter{animation:enter-breathe 7s ease-in-out infinite}
@keyframes enter-breathe{0%,100%{opacity:1}50%{opacity:.82}}
.enter:focus-visible{animation:none;opacity:1}
@media(hover:hover) and (pointer:fine){
  .disciplines button:hover,.brand:hover{--engaged:1}
  nav button:hover:after{transform:scaleX(1)}
  .enter:hover{animation:none;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .motion-detail{transform:none!important}
  .orb.plum{background:#57304f}
  .enter{opacity:1}
}

/* Wide compositions must fit the available height, not just the width.
   These rules leave the established phone-portrait layout intact. */
@media(min-width:601px), (orientation:landscape) and (min-width:480px){
  .ink-shapes{--corner-unit:min(1vw,1.35svh)}
  .teal{width:calc(35 * var(--corner-unit));height:calc(35 * var(--corner-unit));right:calc(-14 * var(--corner-unit));top:calc(-12 * var(--corner-unit))}
  .acid{width:calc(37 * var(--corner-unit));height:calc(37 * var(--corner-unit));right:calc(-24 * var(--corner-unit));top:calc(4 * var(--corner-unit))}
  .coral{width:calc(30 * var(--corner-unit));height:calc(30 * var(--corner-unit));left:calc(-17 * var(--corner-unit));bottom:10svh}
  .plum{width:calc(37 * var(--corner-unit));height:calc(37 * var(--corner-unit));left:calc(-19 * var(--corner-unit));bottom:calc(-10 * var(--corner-unit))}
  main{padding:clamp(8px,2svh,24px) 24px clamp(110px,12svh,115px)}
  .tagline{margin-top:14px}
  .disciplines{margin-top:clamp(18px,3.5svh,43px)}
  .disciplines button{height:calc(clamp(48px,8svh,76px) + 6px)}
  .disciplines .icon{height:clamp(48px,8svh,76px)}
  .identity{width:min(57vw,76svh,660px)}
  h1{font-size:min(14.2vw,19svh,182px)}
  .manifesto{top:9%}
}
@media(min-width:1500px){
  .identity{width:min(57vw,76svh,730px)}
  h1{font-size:min(14.2vw,19svh,205px)}
}
/* Short landscape: keep the title, categories and ENTER in one calm frame. */
@media(max-height:600px) and (orientation:landscape) and (min-width:480px){
  header{height:clamp(44px,15svh,64px);padding:12px 3.5%;align-items:center}
  .brand{width:46px;height:34px}
  nav{gap:28px;padding:0}
  nav button{font-size:13px;letter-spacing:.2em}
  main{min-height:calc(100svh - clamp(44px,15svh,64px) - 32px);padding:4px 24px 72px}
  .identity{width:min(56vw,74svh,580px);max-width:none}
  h1{font-size:min(14.2vw,16svh,100px);line-height:.99}
  .tagline{font-size:12px;letter-spacing:.24em;margin:6px -35px 0;white-space:nowrap}
  .manifesto{display:grid;left:4.1%;top:9%;width:auto;gap:4px;font-size:clamp(13px,3.5svh,19px);letter-spacing:.14em}
  .disciplines{margin-top:8px}
  .disciplines button{height:clamp(28px,9svh,48px);padding:0 15px}
  .disciplines .icon{height:100%}
  .disciplines button+button:before{height:75%;top:12.5%}
  .caption{font-size:10px;margin-top:4px;letter-spacing:.1em}
  .enter{bottom:0;padding:6px 20px;font-size:12px;gap:1px}
  .enter span{font-size:24px}
  footer{height:32px;padding:0 3.5%;font-size:10px;letter-spacing:.12em}
  .est{color:var(--paper)}
  .est:before,.mediums:after{display:none}
  .mediums{max-width:none;white-space:nowrap;line-height:1.2}
  dialog{max-height:calc(100svh - 28px);padding:24px 35px;overflow:auto}
  dialog h2{font-size:36px;margin:14px 0}
  dialog p:not(.eyebrow){font-size:18px}
}
@media(max-height:340px) and (orientation:landscape) and (min-width:480px){
  .brand{width:40px;height:30px}
  nav{gap:22px}
  h1{font-size:min(14.2vw,15svh,92px)}
  .manifesto{font-size:12px}
}

.brand{width:144px;height:144px;display:block;flex:none;margin-top:-12px}
.brand-mark{display:block;width:100%;height:100%;object-fit:contain}
@media(max-height:700px) and (min-width:601px){.manifesto{top:60px}}
@media(max-width:600px){header{height:140px}main{min-height:calc(100svh - 205px)}.brand{width:108px;height:108px;margin-top:-8px}}
@media(max-width:360px){header{height:125px}main{min-height:calc(100svh - 190px)}.brand{width:90px;height:90px}nav{gap:15px}}
@media(max-height:600px) and (orientation:landscape) and (min-width:480px){header{height:clamp(44px,15svh,64px)}main{min-height:calc(100svh - clamp(44px,15svh,64px) - 32px)}.brand{width:104px;height:104px;margin-top:0}.manifesto{top:80px}}
@media(max-height:340px) and (orientation:landscape) and (min-width:480px){.brand{width:88px;height:88px}}

@media(min-width:601px){.manifesto{transform:translate(14px,12px)}}

.brand{position:relative;top:4px}